@extends('theme::backend.layouts.app')

@section('theme::backend-content')
    @include('theme::backend.layouts.navbar')

    <div class="container-fluid">
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">{{ __('backend/chars.title') }}</h1>
        </div>
        @if ($message = Session::get('success'))
            <div class="py-3 mt-2">
                <div class="alert alert-success alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>{{ $message }}</strong>
                </div>
            </div>
        @endif
        @if ($error = Session::get('error'))
            <div class="py-3 mt-2">
                <div class="alert alert-danger alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>{{ $error }}</strong>
                </div>
            </div>
        @endif
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>{{ session('success') }}</strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <strong>{{ session('error') }}</strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            {{ $char->CharID }} [{{ $char->CharName16 }}]
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="table-responsive">
                                    <table class="table table-borderless table-striped">
                                        <tbody>
                                            <tr>
                                                <td>{{ __('backend/chars.edit.level') }}</td>
                                                <td>{{ $char->CurLevel }}</td>
                                            </tr>
                                            <tr>
                                                <td>{{ __('backend/chars.edit.jobname') }}</td>
                                                <td>{{ $char->NickName16 }}</td>
                                            </tr>
                                            <tr>
                                                <td>{{ __('backend/chars.edit.gold') }}</td>
                                                <td>{!! preg_replace('/\B(?=(\d{3})+(?!\d))/', '.', $char->RemainGold) !!}</td>
                                            </tr>
                                            <tr>
                                                <td>Status</td>
                                                <td>
                                                    @php
                                                        $status =
                                                            optional($char->getPlayerDetails)->cur_status ?? false;
                                                    @endphp
                                                    <span class="badge {{ $status ? 'badge-success' : 'badge-danger' }}">
                                                        {{ $status ? 'Online' : 'Offline' }}
                                                    </span>
                                                </td>
                                            </tr>
                                            @if ($char->getPlayerDetails && $char->getPlayerDetails->cur_status)
                                                <tr style="background-color: #e6ffe6;"> <!-- لون خلفية للصف عند true -->
                                                    <td>Last Login</td>
                                                    <td>{{ \Carbon\Carbon::parse($char->getPlayerDetails->last_seen)->format('Y-m-d h:i A') }}
                                                    </td>
                                                </tr>
                                            @else
                                                <tr style="background-color: #ffe6e6;"> <!-- لون خلفية للصف عند false -->
                                                    <td>{{ __('backend/chars.edit.last-logout') }}</td>
                                                    <td>{{ \Carbon\Carbon::parse($char->LastLogout)->format('Y-m-d h:i A') }}
                                                    </td>
                                                </tr>
                                            @endif
                                            @permission('sro-players-index-backend-showip')
                                                <tr>
                                                    <td>IP Address</td>
                                                    <td>
                                                        <a href="https://whatismyipaddress.com/ip/{{ $char->getPlayerDetails->IP ?? 'N/A' }}"
                                                            target="_blank">
                                                            {{ $char->getPlayerDetails->IP ?? 'N/A' }}
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endpermission
                                            @permission('sro-players-index-backend-showhwd')
                                                <tr>
                                                    <td>Hwid</td>
                                                    <td>{{ $char->getPlayerDetails->Serial ?? 'N/A' }}</td>
                                                </tr>
                                            @endpermission
                                            @permission('sro-user-edit-backend')
                                                <tr>
                                                    <td>{{ __('backend/chars.edit.account-id') }}</td>
                                                    <td>
                                                        <a href="{{ route('sro-user-edit-backend', ['user' => $tbUser]) }}">
                                                            {{ __('backend/chars.edit.visit-account') }}</a>
                                                        <a class="small"
                                                            href="{{ route('sro-user-edit-backend', ['user' => $tbUser]) }}"
                                                            target="_blank">
                                                            <i class="fas fa-external-link-alt"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endpermission
                                            @permission('sro-guild-edit-backend')
                                                <tr>
                                                    <td>{{ __('backend/chars.edit.guild') }}</td>
                                                    <td>
                                                        @if ($char->getGuildUser)
                                                            <a
                                                                href="{{ route('sro-guild-edit-backend', ['guild' => $char->getGuildUser->ID]) }}">
                                                                {{ $char->getGuildUser->Name }}</a>
                                                            <a href="{{ route('sro-guild-edit-backend', ['guild' => $char->getGuildUser->ID]) }}"
                                                                class="small">
                                                                <i class="fas fa-external-link-alt"></i>
                                                            </a>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endpermission
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
                @permission('sro-players-unstuck')
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0">
                                {{ __('backend/chars.edit.unstuck.title') }}
                            </h6>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ route('sro-players-unstuck', ['char' => $char->CharID]) }}">
                                @csrf
                                <div class="row">
                                    <div class="col-4">
                                        {{ __('backend/chars.edit.unstuck.current-x') }}
                                    </div>
                                    <div class="col-8">
                                        {{ round($char->PosX, 2) }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4">
                                        {{ __('backend/chars.edit.unstuck.current-y') }}
                                    </div>
                                    <div class="col-8">
                                        {{ round($char->PosY, 2) }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4">
                                        {{ __('backend/chars.edit.unstuck.current-z') }}
                                    </div>
                                    <div class="col-8">
                                        {{ round($char->PosZ, 2) }}
                                    </div>
                                </div>
                                <div class="form-group row mt-2">
                                    <div class="col-6 offset-4">
                                        <span data-toggle="modal" data-target="#unstockModal"
                                            data-title="{{ __('backend/chars.edit.unstuck.modal-title') }}"
                                            data-message="{{ __('backend/chars.edit.unstuck.modal-body', ['char' => $char->CharName16]) }}"
                                            class="btn btn-danger btn-sm" style="cursor: pointer">
                                            {{ __('backend/chars.edit.unstuck.submit') }}
                                        </span>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                @endpermission
                {{-- <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0">
                            {{ __('backend/chars.edit.logged-history.title') }}
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive table-borderless">
                            <table id="loggedInHistory" class="table table-hover dataTable">
                                <thead>
                                    <tr>
                                        <th scope="col">{{ __('backend/chars.edit.logged-history.state') }}</th>
                                        <th scope="col">{{ __('backend/chars.edit.logged-history.date') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($loggedInHistory as $log)
                                        <tr>
                                            <td>
                                                {{ $log->status == 4 ? __('backend/chars.edit.logged-history.in') : __('backend/chars.edit.logged-history.out') }}
                                            </td>
                                            <td>{{ $log->created_at }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td>{{ __('backend/chars.edit.logged-history.empty') }}</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
        @permission('sro-players-index-backend-showinentory')
            <div class="row">
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <div class="card mb-4">
                        <div class="card-header">
                            {{ __('backend/chars.edit.equipment') }}
                        </div>
                        <div class="card-body">
                            <div class="container mt-2">
                                <div class="row">
                                    @foreach ($char->getEquipmentUser as $item)
                                        @php
                                            $refregObjCommon = $item->getRefObjCommon;
                                        @endphp
                                        <div class="col-4">
                                            <div class="image"
                                                style="background:url('{{ asset('/image/sro/' . str_replace(['ddj', '\\'], ['jpg', '/'], $refregObjCommon->AssocFileIcon128)) }}');">
                                                @if (strpos($refregObjCommon->NameStrID128, 'RARE') !== false)
                                                    <img src="{{ asset('/image/sro/sox.gif') }}" width="32" height="32"
                                                        loading="lazy" alt="Seal of X">
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <div class="card mb-4">
                        <div class="card-header">
                            {{ __('backend/chars.edit.inventory') }}
                        </div>
                        <div class="card-body">
                            <div class="container mt-2">
                                <div class="row">
                                    @foreach ($char->getInventoryItemUser as $item)
                                        @php
                                            $refregObjCommon = $item->getRefObjCommon;
                                        @endphp
                                        <div class="col-3">
                                            <div class="image"
                                                style="background:url('{{ asset('/image/sro/' . str_replace(['ddj', '\\'], ['jpg', '/'], $refregObjCommon->AssocFileIcon128)) }}');">
                                                @if (strpos($refregObjCommon->NameStrID128, 'RARE') !== false)
                                                    <img src="{{ asset('/image/sro/sox.gif') }}" width="32"
                                                        height="32" loading="lazy" alt="Seal of X">
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endpermission
        <div class="row">
            @permission('sro-players-send-gift')
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <div class="gift-card card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">
                                Send a Gift
                            </h6>
                        </div>
                        <div class="card-body">
                            <!-- إشعارات الخطأ والنجاح -->
                            <div id="gift-alert-container"></div>
                            <form method="POST" action="{{ route('sro-players-send-gift', ['char' => $char->CharID]) }}">
                                @csrf
                                <div class="form-group">
                                    <label for="gift">Select a Gift</label>
                                    <select class="form-control gift-select" id="gift" name="gift_id" required>
                                        <option value="">Choose a Gift</option>
                                        @foreach ($gifts as $gift)
                                            <option value="{{ $gift->id }}" data-type="{{ $gift->type }}">
                                                ({{ $gift->Count }}x)
                                                {{ $gift->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- خانة الوجهة (Inventory/Storage) - مخفية إذا لم يكن نوع الهدية 'Item' -->
                                <div class="form-group" id="sendToContainer">
                                    <label for="send_to">Send To</label>
                                    <select class="form-control" id="send_to" name="send_to" required>
                                        <option value="">Select Destination</option>
                                        <option value="inventory">Inventory</option>
                                        <option value="storage">Storage</option>
                                        <option value="charchest">Char Chest</option>
                                    </select>
                                </div>

                                <!-- خانة RewardFrom بتظهر فقط لو اختار CharChest -->
                                <div class="form-group" id="rewardFromContainer" style="display: none;">
                                    <label for="reward_from">Reward From</label>
                                    <input type="text" class="form-control" name="reward_from" id="reward_from"
                                        placeholder="Reward source">
                                </div>

                                <!-- خانة Notice in Game -->
                                <div class="form-group">
                                    <label for="notice_in_game">Notice in Game</label>
                                    <input type="text" class="form-control" name="notice_in_game" id="notice_in_game"
                                        placeholder="Leave empty to send without notice|| !Charname = Charname">
                                </div>

                                <div class="form-group">
                                    <label for="reason">Gift Reason</label>
                                    <textarea class="form-control" id="reason" name="reason" rows="3" required></textarea>
                                </div>

                                <button type="submit" class="btn btn-primary submit-gift-btn">
                                    Send Gift
                                </button>
                                <p id="gift-success" style="display: none; color: green; font-weight: bold;">Gift sent
                                    successfully!</p>
                            </form>
                        </div>
                    </div>
                </div>
            @endpermission
            @permission('sro-players-send-message')
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <div class="message-card card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">
                                Send a Message
                            </h6>
                        </div>
                        <div class="card-body">
                            <!-- إشعارات الخطأ والنجاح -->
                            <div id="message-alert-container"></div>
                            <form method="POST" action="{{ route('sro-players-send-message', ['char' => $char->CharID]) }}">
                                @csrf
                                <div class="form-group">
                                    <label for="message">Message Text</label>
                                    <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="message_type">Message Type</label>
                                    <select class="form-control message-type-select" id="message_type" name="message_type"
                                        required>
                                        <option value="0">Choose way</option>
                                        <option value="chat">Chat Message</option>
                                        <option value="notice">Notice</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-primary submit-message-btn">
                                    Send Message
                                </button>
                                <p id="message-success" style="display: none; color: green; font-weight: bold;">Message sent
                                    successfully!</p>
                            </form>
                        </div>
                    </div>
                </div>
            @endpermission
        </div>
    </div>

    <div class="modal fade" id="unstockModal" role="dialog" aria-labelledby="unstockModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary"
                        data-dismiss="modal">{{ __('backend/notification.modal.return') }}</button>
                    <button type="button" class="btn btn-sm btn-danger"
                        id="confirm">{{ __('backend/notification.modal.submit') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('theme::css')
    <style>
        .image {
            width: 32px;
            height: 32px;
            margin: 3px;
            padding: 0;
            color: #fff;
        }
    </style>
@endpush
@push('theme::javascript')
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            function handleFormSubmit(form, alertContainerId) {
                form.addEventListener("submit", function(event) {
                    event.preventDefault(); // منع الإرسال العادي

                    let formData = new FormData(this);
                    let actionUrl = this.action;

                    fetch(actionUrl, {
                            method: "POST",
                            body: formData,
                            headers: {
                                "X-Requested-With": "XMLHttpRequest",
                                "Accept": "application/json"
                            }
                        })
                        .then(response => response.json().then(data => ({
                            status: response.status,
                            body: data
                        })))
                        .then(({
                            status,
                            body
                        }) => {
                            let alertBox = document.createElement("div");
                            alertBox.className = `alert alert-dismissible fade show`;
                            alertBox.innerHTML = `<strong>${body.message}</strong>
                            <button type="button" class="close" data-dismiss="alert">
                                <span>&times;</span>
                            </button>`;

                            let alertContainer = document.getElementById(alertContainerId);
                            alertContainer.innerHTML = ""; // حذف أي إشعارات سابقة
                            alertContainer.appendChild(alertBox);

                            if (status === 200 && body.success) {
                                alertBox.classList.add("alert-success");
                                form.reset(); // تفريغ الحقول بعد الإرسال الناجح
                            } else {
                                alertBox.classList.add("alert-danger");
                            }

                            setTimeout(() => {
                                alertBox.remove();
                            }, 5000);
                        })
                        .catch(error => {
                            console.error("Request Failed:", error);
                            let alertBox = document.createElement("div");
                            alertBox.className = `alert alert-danger alert-dismissible fade show`;
                            alertBox.innerHTML = `<strong>Unexpected error occurred!</strong>
                            <button type="button" class="close" data-dismiss="alert">
                                <span>&times;</span>
                            </button>`;
                            let alertContainer = document.getElementById(alertContainerId);
                            alertContainer.innerHTML = "";
                            alertContainer.appendChild(alertBox);
                            setTimeout(() => {
                                alertBox.remove();
                            }, 5000);
                        });
                });
            }

            handleFormSubmit(document.querySelector(".gift-card form"), "gift-alert-container");
            handleFormSubmit(document.querySelector(".message-card form"), "message-alert-container");

            // ✅ إظهار خانة RewardFrom فقط عند اختيار CharChest
            document.getElementById("send_to").addEventListener("change", function() {
                let rewardFromContainer = document.getElementById("rewardFromContainer");
                let rewardFromInput = document.getElementById("reward_from");

                if (this.value === "charchest") {
                    rewardFromContainer.style.display = "block";
                    rewardFromInput.setAttribute("required", "required");
                } else {
                    rewardFromContainer.style.display = "none";
                    rewardFromInput.removeAttribute("required");
                }
            });


            let giftSelect = document.getElementById("gift");
            let sendToContainer = document.getElementById("sendToContainer");
            let sendToInput = document.getElementById("send_to");

            function checkGiftType() {
                let selectedGift = giftSelect.options[giftSelect.selectedIndex];

                // ✅ التأكد من أن هناك عنصر محدد
                if (!selectedGift) {
                    console.log("❌ No gift selected.");
                    return;
                }

                let giftType = selectedGift.getAttribute("data-type") || "";
                console.log("🔍 Selected Gift Type:", giftType);

                if (giftType !== "Item") {
                    sendToContainer.style.display = "none";
                    sendToInput.removeAttribute("required");

                    // ✅ إخفاء Reward From أيضًا عند تغيير النوع من Item
                    rewardFromContainer.style.display = "none";
                    rewardFromInput.removeAttribute("required");
                } else {
                    sendToContainer.style.display = "block";
                    sendToInput.setAttribute("required", "required");

                    // ✅ فحص إذا كانت الوجهة CharChest لإظهار Reward From
                    checkSendToValue();
                }
            }

            function checkSendToValue() {
                if (sendToInput.value === "charchest") {
                    rewardFromContainer.style.display = "block";
                    rewardFromInput.setAttribute("required", "required");
                } else {
                    rewardFromContainer.style.display = "none";
                    rewardFromInput.removeAttribute("required");
                }
            }

            // ✅ تشغيل عند تغيير نوع الهدية
            giftSelect.addEventListener("change", checkGiftType);

            // ✅ تشغيل عند تغيير الوجهة (Inventory/Storage/CharChest)
            sendToInput.addEventListener("change", checkSendToValue);
            // ✅ تشغيل عند تحميل الصفحة للتأكد من حالة أول اختيار
            setTimeout(checkGiftType, 500);


            document.getElementById("send_to").addEventListener("change", function() {
                let rewardFromContainer = document.getElementById("rewardFromContainer");
                let rewardFromInput = document.getElementById("reward_from");

                if (this.value === "charchest") {
                    rewardFromContainer.style.display = "block";
                    rewardFromInput.setAttribute("required", "required");
                } else {
                    rewardFromContainer.style.display = "none";
                    rewardFromInput.removeAttribute("required");
                }
            });
        });
    </script>
@endpush