@extends('layouts.app')

@section('content')
@php
    $Authuser = auth()->user();
    $canEditPartner = $Authuser && $Authuser->hasPermission('partners', 'edit');
    $canDeletePartner = $Authuser && $Authuser->hasPermission('partners', 'delete');
    $translationLanguages = $appLanguages->filter(fn ($language) => filled($language->code))->values();
    $userTranslations = $user->translations->keyBy(fn ($translation) => strtolower($translation->locale));
@endphp

<link href="{{ asset('assets/plugins/bs-stepper/css/bs-stepper.css') }}" rel="stylesheet" />

<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Partner Management</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.partners.index') }}"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item active" aria-current="page">Edit Partner</li>
                    </ol>
                </nav>
            </div>
        </div>

        @if ($errors->any())
            <div class="alert alert-danger mb-3">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div id="partnerStepper" class="bs-stepper">
            <div class="card">
                <div class="card-header bg-transparent border-bottom">
                    <div class="d-lg-flex flex-lg-row align-items-lg-center justify-content-lg-between" role="tablist">
                        <div class="step" data-target="#step-general">
                            <button type="button" class="step-trigger" role="tab" id="stepperTrigger1" aria-controls="step-general">
                                <div class="bs-stepper-circle"><i class='bx bx-user fs-4'></i></div>
                                <div class="text-start ms-2">
                                    <h5 class="mb-0 steper-title">General</h5>
                                    <p class="mb-0 steper-sub-title">Basic Information</p>
                                </div>
                            </button>
                        </div>
                        <div class="bs-stepper-line"></div>
                        <div class="step" data-target="#step-address">
                            <button type="button" class="step-trigger" role="tab" id="stepperTrigger2" aria-controls="step-address">
                                <div class="bs-stepper-circle"><i class='bx bx-map fs-4'></i></div>
                                <div class="text-start ms-2">
                                    <h5 class="mb-0 steper-title">Address</h5>
                                    <p class="mb-0 steper-sub-title">Location Details</p>
                                </div>
                            </button>
                        </div>
                        <div class="bs-stepper-line"></div>
                        <div class="step" data-target="#step-gallery">
                            <button type="button" class="step-trigger" role="tab" id="stepperTrigger3" aria-controls="step-gallery">
                                <div class="bs-stepper-circle"><i class='bx bx-image fs-4'></i></div>
                                <div class="text-start ms-2">
                                    <h5 class="mb-0 steper-title">Image Gallery</h5>
                                    <p class="mb-0 steper-sub-title">Photos & Gallery</p>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="card-body p-4">
                    <div class="bs-stepper-content">
                        <form action="{{ route('admin.partners.update', $user->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <!-- STEP 1: GENERAL -->
                            <div id="step-general" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperTrigger1">
                                <h5 class="mb-3">General Information</h5>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Name</label>
                                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $user->name) }}" required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label">Email</label>
                                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', $user->email) }}" required>
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-3">
                                        <label class="form-label">Country Code</label>
                                        <select name="phone_country_code" id="phone_country_code" class="form-select @error('phone_country_code') is-invalid @enderror" required>
                                            <option value="">Select</option>
                                            @foreach($countries as $country)
                                                @php $code = $country->phonecode ? '+' . $country->phonecode : null; @endphp
                                                @if($code)
                                                    <option value="{{ $code }}" {{ old('phone_country_code', $user->phone_country_code) === $code ? 'selected' : '' }}>
                                                        {{ $country->name }} ({{ $code }})
                                                    </option>
                                                @endif
                                            @endforeach
                                        </select>
                                        @error('phone_country_code')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-3">
                                        <label class="form-label">Phone No</label>
                                        <input type="text" name="phone_no" class="form-control @error('phone_no') is-invalid @enderror" value="{{ old('phone_no', $user->phone_no) }}" required>
                                        @error('phone_no')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-3">
                                        <label class="form-label">Password (optional)</label>
                                        <input type="password" name="password" class="form-control @error('password') is-invalid @enderror">
                                        @error('password')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-3">
                                        <label class="form-label">Confirm Password</label>
                                        <input type="password" name="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror">
                                        @error('password_confirmation')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">Gender</label>
                                        <select name="gender" class="form-select @error('gender') is-invalid @enderror">
                                            <option value="">Select</option>
                                            <option value="male" {{ old('gender', optional($user->profile)->gender) === 'male' ? 'selected' : '' }}>Male</option>
                                            <option value="female" {{ old('gender', optional($user->profile)->gender) === 'female' ? 'selected' : '' }}>Female</option>
                                            <option value="other" {{ old('gender', optional($user->profile)->gender) === 'other' ? 'selected' : '' }}>Other</option>
                                        </select>
                                        @error('gender')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">Date of Birth</label>
                                        <input type="date" name="date_of_birth" class="form-control @error('date_of_birth') is-invalid @enderror" value="{{ old('date_of_birth', optional($user->profile)->date_of_birth) }}">
                                        @error('date_of_birth')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">Availability</label>
                                        <select name="availability_status" class="form-select @error('availability_status') is-invalid @enderror">
                                            @php $availability = old('availability_status', optional($user->profile)->availability_status ?? 'unavailable'); @endphp
                                            <option value="unavailable" {{ $availability === 'unavailable' ? 'selected' : '' }}>Unavailable</option>
                                            <option value="available" {{ $availability === 'available' ? 'selected' : '' }}>Available</option>
                                            <option value="in_meeting" {{ $availability === 'in_meeting' ? 'selected' : '' }}>In Meeting</option>
                                        </select>
                                        @error('availability_status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label">Hourly Price</label>
                                        <input type="number" step="0.01" name="pricing_hourly"
                                            class="form-control @error('pricing_hourly') is-invalid @enderror"
                                            value="{{ old('pricing_hourly', optional($user->profile)->pricing_hourly) }}" placeholder="Enter hourly price">
                                        @error('pricing_hourly')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label">Minimum Booking Hours</label>
                                        <input type="number" name="minimum_booking_hours"
                                            class="form-control @error('minimum_booking_hours') is-invalid @enderror"
                                            value="{{ old('minimum_booking_hours', optional($user->profile)->minimum_bookiing_hours) }}" placeholder="Enter minimum booking hours">
                                        @error('minimum_booking_hours')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-12">
                                        <label class="form-label">Languages</label>
                                        <select name="languages[]" id="languages" class="form-select @error('languages') is-invalid @enderror @error('languages.*') is-invalid @enderror" multiple>
                                            @php
                                                $selectedLanguages = old('languages', optional($user->languages)->pluck('id')?->toArray() ?? []);
                                            @endphp
                                            @foreach($languages as $language)
                                                <option value="{{ $language->id }}" {{ in_array($language->id, $selectedLanguages) ? 'selected' : '' }}>
                                                    {{ $language->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('languages')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                        @error('languages.*')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-12">
                                        <label class="form-label">Bio</label>
                                        <textarea name="bio" class="form-control @error('bio') is-invalid @enderror" rows="4">{{ old('bio', optional($user->profile)->bio) }}</textarea>
                                        @error('bio')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    @if($translationLanguages->count())
                                        <div class="col-12">
                                            <div class="border rounded p-3">
                                                <h6 class="mb-1">Translations</h6>
                                                <p class="text-muted mb-3 small">Manual translation fields. Default locale: <strong>{{ strtoupper(setting('default_translation_locale', 'en')) }}</strong>.</p>
                                                @include('includes.partial.auto_translate.create_toggle')

                                                <ul class="nav nav-tabs nav-primary flex-nowrap overflow-auto mb-3" role="tablist">
                                                    @foreach($translationLanguages as $language)
                                                        <li class="nav-item" role="presentation">
                                                            <button
                                                                class="nav-link {{ $loop->first ? 'active' : '' }}"
                                                                data-bs-toggle="tab"
                                                                data-bs-target="#edit-partner-translation-{{ $language->code }}"
                                                                type="button"
                                                                role="tab">
                                                                {{ strtoupper($language->code) }}
                                                            </button>
                                                        </li>
                                                    @endforeach
                                                </ul>

                                                <div class="tab-content">
                                                    @foreach($translationLanguages as $language)
                                                        @php
                                                            $translation = $userTranslations->get(strtolower($language->code));
                                                            $translationLanguageName = $language->language->name ?? ($language->data['name'] ?? strtoupper($language->code));
                                                        @endphp
                                                        <div
                                                            class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                                            id="edit-partner-translation-{{ $language->code }}"
                                                            role="tabpanel">
                                                            <div class="row g-3">
                                                                <div class="col-md-6 translation-subject-container">
                                                                    <label class="form-label">
                                                                        {{ $translationLanguageName }} Name
                                                                        @if($language->code === setting('default_translation_locale', 'en'))
                                                                            <span class="badge bg-light text-dark border ms-1">Default</span>
                                                                        @endif
                                                                    </label>
                                                                    <input
                                                                        type="text"
                                                                        name="translations[{{ $language->code }}][name]"
                                                                        class="form-control @error('translations.' . $language->code . '.name') is-invalid @enderror"
                                                                        value="{{ old('translations.' . $language->code . '.name', $translation->name ?? null) }}">
                                                                    @error('translations.' . $language->code . '.name')
                                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                                    @enderror
                                                                </div>

                                                                <div class="col-md-12">
                                                                    <label class="form-label">{{ $translationLanguageName }} Bio</label>
                                                                    <textarea
                                                                        name="translations[{{ $language->code }}][bio]"
                                                                        class="form-control @error('translations.' . $language->code . '.bio') is-invalid @enderror"
                                                                        rows="3">{{ old('translations.' . $language->code . '.bio', $translation->bio ?? null) }}</textarea>
                                                                    @error('translations.' . $language->code . '.bio')
                                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="col-12 mt-4">
                                        <div class="d-flex align-items-center justify-content-end gap-3">
                                            <button type="button" class="btn btn-primary px-4" onclick="partnerStepper.next()">Next<i class='bx bx-right-arrow-alt ms-2'></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- STEP 2: ADDRESS -->
                            <div id="step-address" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperTrigger2">
                                <h5 class="mb-3">Address & Location Information</h5>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">Country</label>
                                        <select name="country_id" class="form-select @error('country_id') is-invalid @enderror">
                                            <option value="">Select Country</option>
                                            @foreach($countries as $country)
                                                <option value="{{ $country->id }}" {{ (string) old('country_id', optional($user->address)->country_id) === (string) $country->id ? 'selected' : '' }}>
                                                    {{ $country->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('country_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">State</label>
                                        <select name="state_id" id="state_id" class="form-select @error('state_id') is-invalid @enderror" data-selected="{{ old('state_id', optional($user->address)->state_id) }}">
                                            <option value="">Select State</option>
                                        </select>
                                        @error('state_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">City</label>
                                        <select name="city_id" id="city_id" class="form-select @error('city_id') is-invalid @enderror" data-selected="{{ old('city_id', optional($user->address)->city_id) }}">
                                            <option value="">Select City</option>
                                        </select>
                                        @error('city_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-12">
                                        <label class="form-label">Address</label>
                                        <textarea name="address" class="form-control @error('address') is-invalid @enderror" rows="3">{{ old('address', optional($user->address)->address) }}</textarea>
                                        @error('address')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">Current Latitude</label>
                                        <input type="text" name="current_latitude" class="form-control @error('current_latitude') is-invalid @enderror" value="{{ old('current_latitude', optional($user->address)->current_latitude) }}">
                                        @error('current_latitude')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">Current Longitude</label>
                                        <input type="text" name="current_longitude" class="form-control @error('current_longitude') is-invalid @enderror" value="{{ old('current_longitude', optional($user->address)->current_longitude) }}">
                                        @error('current_longitude')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">Pin Code</label>
                                        <input type="text" name="pin_code" class="form-control @error('pin_code') is-invalid @enderror" value="{{ old('pin_code', optional($user->address)->pin_code) }}">
                                        @error('pin_code')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 mt-4">
                                        <div class="d-flex align-items-center justify-content-between gap-3">
                                            <button type="button" class="btn btn-outline-secondary px-4" onclick="partnerStepper.previous()"><i class='bx bx-left-arrow-alt me-2'></i>Previous</button>
                                            <button type="button" class="btn btn-primary px-4" onclick="partnerStepper.next()">Next<i class='bx bx-right-arrow-alt ms-2'></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- STEP 3: IMAGE GALLERY -->
                            <div id="step-gallery" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepperTrigger3">
                                <h5 class="mb-3">Image & Gallery Uploads</h5>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Profile Image</label>
                                        @if($user->profile_image_url)
                                            <div class="mb-2">
                                                <img src="{{ $user->profile_image_url }}" alt="Profile" class="rounded border p-1" style="width: 80px; height: 80px; object-fit: cover;">
                                            </div>
                                        @endif
                                        <input type="file" id="profile-image" name="profile_image" class="form-control @error('profile_image') is-invalid @enderror" accept="image/*">
                                        @error('profile_image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label">Cover Photo</label>
                                        @if(optional($user->profile)->cover_image_url)
                                            <div class="mb-2">
                                                <img src="{{ optional($user->profile)->cover_image_url }}" alt="Cover" class="rounded border p-1" style="width: 140px; height: 80px; object-fit: cover;">
                                            </div>
                                        @endif
                                        <input type="file" id="cover-image" name="cover_image" class="form-control @error('cover_image') is-invalid @enderror" accept="image/*">
                                        @error('cover_image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-12">
                                        <label class="form-label">Gallery Images</label>
                                        <input type="file" id="gallery-uploadify" name="gallery[]" class="form-control @error('gallery') is-invalid @enderror @error('gallery.*') is-invalid @enderror" accept="image/*" multiple>
                                        @error('gallery')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                        @error('gallery.*')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror

                                        @if($user->media && $user->getMedia('gallery')->count() > 0)
                                            <div class="mt-3">
                                                <label class="form-label d-block text-muted">Existing Gallery Images</label>
                                                <div class="row g-2" id="gallery-container">
                                                    @foreach($user->getMedia('gallery') as $media)
                                                        <div class="col-6 col-sm-4 col-md-3 col-lg-2" id="gallery-item-{{ $media->id }}">
                                                            <div class="position-relative border rounded p-1 text-center bg-light">
                                                                <img src="{{ $media->getUrl() }}" alt="Gallery Image" class="img-fluid rounded" style="height: 100px; object-fit: cover; width: 100%;">
                                                                @if($canDeletePartner)
                                                                    <button type="button"
                                                                            class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 p-0 d-flex align-items-center justify-content-center delete-gallery-image"
                                                                            style="width: 24px; height: 24px;"
                                                                            data-url="{{ route('admin.partners.delete-gallery-image', [$user->id, $media->id]) }}"
                                                                            data-media-id="{{ $media->id }}"
                                                                            title="Remove Image">
                                                                        <i class="bx bx-x"></i>
                                                                    </button>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="col-12 mt-4">
                                        <div class="d-flex align-items-center justify-content-between gap-3">
                                            <button type="button" class="btn btn-outline-secondary px-4" onclick="partnerStepper.previous()"><i class='bx bx-left-arrow-alt me-2'></i>Previous</button>
                                            <div class="d-flex align-items-center gap-3">
                                                @if($canEditPartner)
                                                    <button type="submit" class="btn btn-primary px-4"><i class="bx bx-save me-1"></i>Update Partner</button>
                                                @endif
                                                <a href="{{ route('admin.partners.index') }}" class="btn btn-light px-4">Back</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@include('includes.commonjs')

<script src="{{ asset('assets/plugins/bs-stepper/js/bs-stepper.min.js') }}"></script>
<script>
var partnerStepper;
$(function () {
    var stepperEl = document.querySelector('#partnerStepper');
    if (stepperEl) {
        partnerStepper = new Stepper(stepperEl, {
            linear: false,
            animation: true
        });
    }

    if ($.fn.imageuploadify) {
        $('#gallery-uploadify').imageuploadify();
        $('#gallery-uploadify').closest('form').off('submit');
    }

    if (typeof FilePond !== 'undefined') {
        if (typeof FilePondPluginImagePreview !== 'undefined') {
            FilePond.registerPlugin(FilePondPluginImagePreview);
        }

        const profileInput = document.querySelector('#profile-image');
        if (profileInput) {
            FilePond.create(profileInput, {
                allowMultiple: false,
                storeAsFile: true,
                allowImagePreview: true,
                credits: false
            });
        }

        const coverInput = document.querySelector('#cover-image');
        if (coverInput) {
            FilePond.create(coverInput, {
                allowMultiple: false,
                storeAsFile: true,
                allowImagePreview: true,
                credits: false
            });
        }
    }

    // delete gallery image 
    $(document).on('click', '.delete-gallery-image', function () {
        const $btn = $(this);
        const url = $btn.data('url');
        const mediaId = $btn.data('media-id');

        if (!url || !mediaId) {
            return;
        }

        if (!confirm('Are you sure you want to remove this gallery image?')) {
            return;
        }

        $btn.prop('disabled', true).text('...');

        $.ajax({
            url: url,
            type: 'DELETE',
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function (response) {
                if (response.success) {
                    $('#gallery-item-' + mediaId).remove();
                }
            },
            error: function () {
                alert('Failed to remove image. Please try again.');
                $btn.prop('disabled', false).html('<i class="bx bx-x"></i>');
            }
        });
    });
});
</script>
@endsection