@extends('layouts.app')

@section('title', isset($operationDetails) ? 'Edit Operation Details' : 'Add Operation Details')

@section('content')
<div class="min-h-screen bg-gray-50 p-6">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-800">
                        {{ isset($operationDetails) ? 'Edit Operation Details' : 'Add Operation Details' }}
                    </h1>
                    <p class="text-gray-600">Step 3: Provide information about your fishing operations</p>
                </div>
                <a href="{{ route('applicant.dashboard') }}"
                   class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700">
                    Back to Dashboard
                </a>
            </div>
        </div>

        @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Form -->
        <div class="bg-white rounded-lg shadow-md p-8">
            @if(isset($operationDetails))
                <form method="POST" action="{{ route('applicant.operation.update', $operationDetails->id) }}" enctype="multipart/form-data">
                    @method('PUT')
            @else
                <form method="POST" action="{{ route('applicant.operation.store') }}" enctype="multipart/form-data">
            @endif
                @csrf

                <div class="space-y-6">

                    <!-- ── FOREIGN BUYER DETAILS ── -->
                    <div>
                        <h2 class="text-lg font-semibold text-gray-700 mb-4 border-b pb-2">Foreign Buyer Details</h2>
                        <div class="space-y-4">

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    Foreign Buyer / Company Name <span class="text-red-500">*</span>
                                </label>
                                <textarea name="supplying_companies" rows="3"
                                    placeholder="List the companies you supply to"
                                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 @error('supplying_companies') border-red-400 @enderror"
                                    required>{{ isset($operationDetails) ? $operationDetails->supplying_companies : old('supplying_companies') }}</textarea>
                                <p class="text-xs text-gray-500 mt-1">The importing company</p>
                                @error('supplying_companies')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">
                                        Foreign Buyer Email Address <span class="text-red-500">*</span>
                                    </label>
                                    <input type="email" name="foreign_buyer_email"
                                        value="{{ isset($operationDetails) ? $operationDetails->foreign_buyer_email : old('foreign_buyer_email') }}"
                                        placeholder="buyer@example.com"
                                        class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 @error('foreign_buyer_email') border-red-400 @enderror"
                                        required>
                                    @error('foreign_buyer_email')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">
                                        Foreign Buyer Phone Number <span class="text-red-500">*</span>
                                    </label>
                                    <input type="tel" name="foreign_buyer_phone"
                                        value="{{ isset($operationDetails) ? $operationDetails->foreign_buyer_phone : old('foreign_buyer_phone') }}"
                                        placeholder="+1 234 567 8900"
                                        class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 @error('foreign_buyer_phone') border-red-400 @enderror"
                                        required>
                                    @error('foreign_buyer_phone')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- Business License Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Business License <span class="text-red-500">*</span>
                        </label>
                        <input type="file" name="business_license_path" accept="image/*,.pdf"
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 @error('business_license_path') border-red-400 @enderror">
                        <p class="text-xs text-gray-500 mt-1">Upload your business license (PDF or Image, max 5MB)</p>
                        @if(isset($operationDetails) && $operationDetails->business_license_path)
                            <div class="mt-2 p-2 bg-green-50 border border-green-200 rounded">
                                <p class="text-sm text-green-700">
                                    ✓ Current file:
                                    <a href="{{ Storage::url($operationDetails->business_license_path) }}" target="_blank" class="underline hover:text-green-900">View Document</a>
                                </p>
                            </div>
                        @endif
                        @error('business_license_path')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Harvest Islands -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Harvest Islands</label>
                        <p class="text-xs text-gray-500 mb-3">Select the Kiribati islands where you harvest fish</p>

                        @php
                            $selectedIslandIds = isset($operationDetails)
                                ? $operationDetails->harvestIslands->pluck('id')->toArray()
                                : old('harvest_island_ids', []);
                        @endphp

                        <div class="border border-gray-300 rounded-lg p-4 bg-gray-50">
                            @foreach(['Gilbert Islands', 'Phoenix Islands', 'Line Islands'] as $group)
                                @php $groupIslands = $kiribatiIslands->where('group', $group); @endphp
                                @if($groupIslands->count() > 0)
                                    <div class="mb-4 {{ !$loop->last ? 'pb-4 border-b border-gray-300' : '' }}">
                                        <h3 class="font-semibold text-gray-800 mb-3 text-sm">{{ $group }}</h3>
                                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                                            @foreach($groupIslands as $island)
                                                <label class="flex items-center space-x-2 cursor-pointer hover:bg-gray-100 p-2 rounded">
                                                    <input type="checkbox"
                                                           name="harvest_island_ids[]"
                                                           value="{{ $island->id }}"
                                                           {{ in_array($island->id, $selectedIslandIds) ? 'checked' : '' }}
                                                           class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
                                                    <span class="text-sm text-gray-700">{{ $island->island_name }}</span>
                                                </label>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>

                    <!-- Additional Harvest Islands -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Additional Harvest Islands/Notes</label>
                        <textarea name="harvest_islands" rows="2"
                            placeholder="Add any additional islands or notes not listed above"
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">{{ isset($operationDetails) ? $operationDetails->harvest_islands : old('harvest_islands') }}</textarea>
                        <p class="text-xs text-gray-500 mt-1">Optional: Additional islands or specific locations</p>
                    </div>

                    {{-- TARGET FISH FAMILIES --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Target Fish Families</label>
                        <p class="text-xs text-gray-500 mb-3">Select one or more fish families you intend to harvest</p>

                        @php
                            $selectedFamilyIds = isset($operationDetails)
                                ? $operationDetails->targetFishFamilies->where('is_other', false)->pluck('id')->toArray()
                                : old('target_fish_family_ids', []);

                            $otherFamilySelected = isset($operationDetails)
                                && $operationDetails->targetFishFamilies->where('is_other', true)->count() > 0;
                        @endphp

                        @if($activeFishFamilies->isEmpty())
                            <div class="border border-amber-200 bg-amber-50 rounded-lg p-4 text-sm text-amber-700">
                                No fish families are currently available. Please contact the administrator.
                            </div>
                        @else
                            <div class="border border-gray-300 rounded-lg p-4 bg-gray-50">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                                    @foreach($activeFishFamilies as $family)
                                        @if(!$family->is_other)
                                            <label class="flex items-center space-x-3 cursor-pointer hover:bg-white p-3 rounded-lg border border-transparent hover:border-gray-200 transition-colors
                                                        {{ in_array($family->id, $selectedFamilyIds) ? 'bg-white border-indigo-200' : '' }}">
                                                <input type="checkbox"
                                                    name="target_fish_family_ids[]"
                                                    value="{{ $family->id }}"
                                                    {{ in_array($family->id, $selectedFamilyIds) ? 'checked' : '' }}
                                                    class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 fish-family-checkbox">
                                                <span class="text-sm text-gray-700 font-medium">{{ $family->name }}</span>
                                            </label>
                                        @endif
                                    @endforeach

                                    @foreach($activeFishFamilies as $family)
                                        @if($family->is_other)
                                            <label class="flex items-center space-x-3 cursor-pointer hover:bg-white p-3 rounded-lg border border-transparent hover:border-gray-200 transition-colors
                                                        {{ $otherFamilySelected ? 'bg-white border-indigo-200' : '' }}">
                                                <input type="checkbox"
                                                    name="target_fish_family_ids[]"
                                                    value="{{ $family->id }}"
                                                    id="fish-family-other-checkbox"
                                                    {{ $otherFamilySelected ? 'checked' : '' }}
                                                    class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 fish-family-checkbox"
                                                    onchange="toggleFishFamilyOther(this)">
                                                <span class="text-sm text-gray-700 font-medium">{{ $family->name }}</span>
                                            </label>
                                        @endif
                                    @endforeach
                                </div>

                                <div id="fish-family-other-container"
                                     class="{{ $otherFamilySelected ? '' : 'hidden' }} mt-4 pt-4 border-t border-gray-200 space-y-3">
                                    <p class="text-xs text-gray-500 font-medium">Specify other fish family/families:</p>
                                    <div id="other-fish-families-list" class="space-y-2"></div>
                                    <button type="button" onclick="addOtherFishFamily()"
                                            class="mt-2 flex items-center gap-1 text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                                        </svg>
                                        Add Another Fish Family
                                    </button>
                                </div>

                                <div class="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between">
                                    <p class="text-xs text-gray-400">
                                        <span id="family-count">{{ count($selectedFamilyIds) + ($otherFamilySelected ? 1 : 0) }}</span> selected
                                    </p>
                                    <button type="button" onclick="clearFamilies()"
                                            class="text-xs text-gray-400 hover:text-red-500 transition-colors">
                                        Clear all
                                    </button>
                                </div>
                            </div>
                        @endif

                        @error('target_fish_family_ids')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- HARVESTING METHODS --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Harvesting Methods</label>
                        <p class="text-xs text-gray-500 mb-3">Select all harvesting methods that apply</p>

                        @php
                            $selectedHarvestingMethodIds = isset($operationDetails)
                                ? $operationDetails->harvestingMethods->where('is_other', false)->pluck('id')->toArray()
                                : old('harvesting_method_ids', []);

                            $otherHarvestingSelected = isset($operationDetails)
                                && $operationDetails->harvestingMethods->where('is_other', true)->count() > 0;
                        @endphp

                        @if($harvestingMethods->isEmpty())
                            <div class="border border-amber-200 bg-amber-50 rounded-lg p-4 text-sm text-amber-700">
                                No harvesting methods are currently available. Please contact the administrator.
                            </div>
                        @else
                            <div class="border border-gray-300 rounded-lg p-4 bg-gray-50">
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                                    @foreach($harvestingMethods as $method)
                                        @if(!$method->is_other)
                                            <label class="flex items-center space-x-2 cursor-pointer hover:bg-gray-100 p-2 rounded">
                                                <input type="checkbox"
                                                    name="harvesting_method_ids[]"
                                                    value="{{ $method->id }}"
                                                    {{ in_array($method->id, $selectedHarvestingMethodIds) ? 'checked' : '' }}
                                                    class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 harvesting-method-checkbox">
                                                <span class="text-sm text-gray-700">{{ $method->name }}</span>
                                            </label>
                                        @endif
                                    @endforeach

                                    @foreach($harvestingMethods as $method)
                                        @if($method->is_other)
                                            <label class="flex items-center space-x-2 cursor-pointer hover:bg-gray-100 p-2 rounded">
                                                <input type="checkbox"
                                                    name="harvesting_method_ids[]"
                                                    value="{{ $method->id }}"
                                                    id="harvesting-other-checkbox"
                                                    {{ $otherHarvestingSelected ? 'checked' : '' }}
                                                    class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 harvesting-method-checkbox"
                                                    onchange="toggleHarvestingOther(this)">
                                                <span class="text-sm text-gray-700">{{ $method->name }}</span>
                                            </label>
                                        @endif
                                    @endforeach
                                </div>

                                <div id="harvesting-other-container"
                                     class="{{ $otherHarvestingSelected ? '' : 'hidden' }} mt-4 pt-4 border-t border-gray-200 space-y-3">
                                    <p class="text-xs text-gray-500 font-medium">Specify other harvesting method(s):</p>
                                    <div id="other-harvesting-methods-list" class="space-y-2"></div>
                                    <button type="button" onclick="addOtherHarvestingMethod()"
                                            class="mt-2 flex items-center gap-1 text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                                        </svg>
                                        Add Another Harvesting Method
                                    </button>
                                </div>

                                <div class="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between">
                                    <p class="text-xs text-gray-400">
                                        <span id="harvesting-method-count">{{ count($selectedHarvestingMethodIds) + ($otherHarvestingSelected ? 1 : 0) }}</span> selected
                                    </p>
                                    <button type="button" onclick="clearHarvestingMethods()"
                                            class="text-xs text-gray-400 hover:text-red-500 transition-colors">
                                        Clear all
                                    </button>
                                </div>
                            </div>
                        @endif

                        @error('harvesting_method_ids')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- LICENSE DURATION --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                                        License Duration<span class="text-red-500"> * </span>
                                </label>
                        <p class="text-xs text-gray-500 mb-3">Select the duration of the license you are applying for</p>

                        @php
                            $selectedLicenseDurationId = isset($operationDetails)
                                ? $operationDetails->license_duration_id
                                : old('license_duration_id');
                        @endphp

                        @if($licenseDurations->isEmpty())
                            <div class="border border-amber-200 bg-amber-50 rounded-lg p-4 text-sm text-amber-700">
                                No license durations are currently available. Please contact the administrator.
                            </div>
                        @else
                            <div class="border border-gray-300 rounded-lg p-4 bg-gray-50">
                                <div class="flex flex-wrap gap-4">
                                    @foreach($licenseDurations as $duration)
                                        <label class="flex items-center space-x-3 cursor-pointer hover:bg-white p-3 rounded-lg border border-transparent hover:border-gray-200 transition-colors
                                                      {{ $selectedLicenseDurationId == $duration->id ? 'bg-white border-indigo-200' : '' }}">
                                            <input type="radio"
                                                   name="license_duration_id"
                                                   value="{{ $duration->id }}"
                                                   {{ $selectedLicenseDurationId == $duration->id ? 'checked' : '' }}
                                                   class="w-4 h-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
                                            <span class="text-sm text-gray-700 font-medium">{{ $duration->name }}</span>
                                            @if($duration->description)
                                                <span class="text-xs text-gray-400">({{ $duration->description }})</span>
                                            @endif
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @error('license_duration_id')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Business Plan Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Business Plan</label>
                        <input type="file" name="business_plan_path" accept="image/*,.pdf"
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                        <p class="text-xs text-gray-500 mt-1">Optional: Upload your business plan (PDF or Image, max 5MB)</p>
                        @if(isset($operationDetails) && $operationDetails->business_plan_path)
                            <div class="mt-2 p-2 bg-green-50 border border-green-200 rounded">
                                <p class="text-sm text-green-700">
                                    ✓ Current file:
                                    <a href="{{ Storage::url($operationDetails->business_plan_path) }}" target="_blank" class="underline hover:text-green-900">View Document</a>
                                </p>
                            </div>
                        @endif
                    </div>

                    <!-- Vessel Ownership -->
                    <div class="border-t pt-6">
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                                        Vessel Ownership<span class="text-red-500"> * </span>
                                </label>
                        <p class="text-xs text-gray-500 mb-4">Do you have a vessel associated with this application?</p>

                        @php
                            $hasVessel = isset($operationDetails)
                                ? $operationDetails->has_vessel
                                : (old('has_vessel') !== null ? old('has_vessel') : null);
                        @endphp

                        <div class="flex gap-6">
                            <label class="flex items-center space-x-2 cursor-pointer">
                                <input type="radio" name="has_vessel" value="1" id="has_vessel_yes"
                                       {{ $hasVessel == '1' || $hasVessel === true ? 'checked' : '' }}
                                       onchange="toggleVesselInfo()"
                                       class="w-4 h-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
                                <span class="text-sm text-gray-700 font-medium">Yes, I have a vessel</span>
                            </label>

                            <label class="flex items-center space-x-2 cursor-pointer">
                                <input type="radio" name="has_vessel" value="0" id="has_vessel_no"
                                       {{ $hasVessel == '0' || $hasVessel === false ? 'checked' : '' }}
                                       onchange="toggleVesselInfo()"
                                       class="w-4 h-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
                                <span class="text-sm text-gray-700 font-medium">No, I do not have a vessel</span>
                            </label>
                        </div>

                        <div id="vessel-yes-info" class="hidden mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                            <div class="flex items-start space-x-2">
                                <svg class="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                                </svg>
                                <p class="text-sm text-blue-700">
                                    After saving you will be taken to <strong>Step 4: Vessel Details</strong> to register your vessel.
                                </p>
                            </div>
                        </div>

                        <div id="vessel-no-info" class="hidden mt-4 p-4 bg-amber-50 border border-amber-200 rounded-lg">
                            <div class="flex items-start space-x-2">
                                <svg class="w-5 h-5 text-amber-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                <p class="text-sm text-amber-700">
                                    Step 4 (Vessel Details) will be <strong>skipped</strong>. You will be taken directly to the dashboard to <strong>submit your application (Step 5)</strong>. You can always add vessel details later.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="pt-4 border-t">
                        <button type="submit" id="submit-btn"
                                class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 font-semibold text-lg transition-all duration-200">
                            {{ isset($operationDetails) ? 'Update Operation Details' : 'Save & Continue' }}
                        </button>
                    </div>

                </div>
            </form>
        </div>
    </div>
</div>
@push('scripts')
<script>
    const OPERATION_CONFIG = {
        isEditMode: {{ isset($operationDetails) ? 'true' : 'false' }},
        otherFishFamilies: {!! isset($operationDetails)
            ? json_encode(
                $operationDetails->targetFishFamilies
                    ->where('is_other', true)
                    ->pluck('pivot.other_value')
                    ->filter()
                    ->values()
              )
            : '[]' !!},
        otherHarvestingMethods: {!! isset($operationDetails)
            ? json_encode(
                $operationDetails->harvestingMethods
                    ->where('is_other', true)
                    ->pluck('pivot.other_value')
                    ->filter()
                    ->values()
              )
            : '[]' !!},
    };
</script>
<script>
(() => {
    function updateFamilyCount() {
        const count = document.querySelectorAll('.fish-family-checkbox:checked').length;
        const el    = document.getElementById('family-count');
        if (el) el.textContent = count;
    }

    window.clearFamilies = function () {
        document.querySelectorAll('.fish-family-checkbox').forEach(cb => cb.checked = false);
        updateFamilyCount();
    };

    document.querySelectorAll('.fish-family-checkbox').forEach(cb => {
        cb.addEventListener('change', updateFamilyCount);
    });

    function updateHarvestingMethodCount() {
        const count = document.querySelectorAll('.harvesting-method-checkbox:checked').length;
        const el    = document.getElementById('harvesting-method-count');
        if (el) el.textContent = count;
    }

    window.clearHarvestingMethods = function () {
        document.querySelectorAll('.harvesting-method-checkbox').forEach(cb => cb.checked = false);
        updateHarvestingMethodCount();
    };

    document.querySelectorAll('.harvesting-method-checkbox').forEach(cb => {
        cb.addEventListener('change', updateHarvestingMethodCount);
    });

    window.toggleVesselInfo = function () {
        const hasVessel     = document.getElementById('has_vessel_yes').checked;
        const vesselYesInfo = document.getElementById('vessel-yes-info');
        const vesselNoInfo  = document.getElementById('vessel-no-info');
        const submitBtn     = document.getElementById('submit-btn');
        const isEditMode    = typeof OPERATION_CONFIG !== 'undefined' && OPERATION_CONFIG.isEditMode;

        if (!isEditMode && submitBtn) {
            if (hasVessel) {
                submitBtn.textContent = 'Save & Continue to Vessel Details →';
                submitBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
                submitBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
            } else {
                submitBtn.textContent = 'Save & Go to Dashboard (Step 5) →';
                submitBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
                submitBtn.classList.add('bg-green-600', 'hover:bg-green-700');
            }
        }

        if (vesselYesInfo) vesselYesInfo.classList.toggle('hidden', !hasVessel);
        if (vesselNoInfo)  vesselNoInfo.classList.toggle('hidden',   hasVessel);
    };

    let fishFamilyOtherCount = 0;

    window.toggleFishFamilyOther = function (checkbox) {
        const container = document.getElementById('fish-family-other-container');
        const list      = document.getElementById('other-fish-families-list');
        if (checkbox.checked) {
            container.classList.remove('hidden');
            if (list.children.length === 0) window.addOtherFishFamily();
        } else {
            container.classList.add('hidden');
            list.innerHTML       = '';
            fishFamilyOtherCount = 0;
        }
    };

    window.addOtherFishFamily = function (value = '') {
        const list  = document.getElementById('other-fish-families-list');
        const index = fishFamilyOtherCount++;
        const div   = document.createElement('div');
        div.className = 'flex items-center gap-2';
        div.innerHTML = `
            <input type="text"
                   name="other_fish_families[${index}]"
                   value="${value}"
                   placeholder="e.g., Lutjanidae"
                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500">
            <button type="button"
                    onclick="removeOtherEntry(this)"
                    class="text-red-400 hover:text-red-600 flex-shrink-0 p-1">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        `;
        list.appendChild(div);
    };

    let harvestingOtherCount = 0;

    window.toggleHarvestingOther = function (checkbox) {
        const container = document.getElementById('harvesting-other-container');
        const list      = document.getElementById('other-harvesting-methods-list');
        if (checkbox.checked) {
            container.classList.remove('hidden');
            if (list.children.length === 0) window.addOtherHarvestingMethod();
        } else {
            container.classList.add('hidden');
            list.innerHTML       = '';
            harvestingOtherCount = 0;
        }
    };

    window.addOtherHarvestingMethod = function (value = '') {
        const list  = document.getElementById('other-harvesting-methods-list');
        const index = harvestingOtherCount++;
        const div   = document.createElement('div');
        div.className = 'flex items-center gap-2';
        div.innerHTML = `
            <input type="text"
                   name="other_harvesting_methods[${index}]"
                   value="${value}"
                   placeholder="e.g., Spearfishing"
                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500">
            <button type="button"
                    onclick="removeOtherEntry(this)"
                    class="text-red-400 hover:text-red-600 flex-shrink-0 p-1">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        `;
        list.appendChild(div);
    };

    window.removeOtherEntry = function (btn) {
        btn.closest('div').remove();
    };

    document.addEventListener('DOMContentLoaded', () => {
        const yesRadio = document.getElementById('has_vessel_yes');
        const noRadio  = document.getElementById('has_vessel_no');
        if (yesRadio?.checked || noRadio?.checked) {
            toggleVesselInfo();
        }

        updateFamilyCount();
        updateHarvestingMethodCount();

        if (typeof OPERATION_CONFIG !== 'undefined' && OPERATION_CONFIG.isEditMode) {
            if (OPERATION_CONFIG.otherFishFamilies?.length > 0) {
                const cb = document.getElementById('fish-family-other-checkbox');
                if (cb) {
                    cb.checked = true;
                    document.getElementById('fish-family-other-container')?.classList.remove('hidden');
                    OPERATION_CONFIG.otherFishFamilies.forEach(val => window.addOtherFishFamily(val));
                }
            }
            if (OPERATION_CONFIG.otherHarvestingMethods?.length > 0) {
                const cb = document.getElementById('harvesting-other-checkbox');
                if (cb) {
                    cb.checked = true;
                    document.getElementById('harvesting-other-container')?.classList.remove('hidden');
                    OPERATION_CONFIG.otherHarvestingMethods.forEach(val => window.addOtherHarvestingMethod(val));
                }
            }
        }
    });
})();
</script>
@endpush
@endsection