@extends('app')

@section('content')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/jstree/dist/themes/default/style.min.css') }}">
    @if (Session::has('flash_message'))
        <div class="alert {{ Session::has('flash_message_status') ? 'alert-error' : 'alert-success' }}">
            <button class="close" data-dismiss="alert"></button>
            {!! Session::get('flash_message') !!}
        </div>
    @endif
    <div class="grid simple vertical familytree-view" id="split_view" style="overflow: hidden; margin-bottom: 0px;">
        <div class="grid-body no-border">
            <div class="row">
                <div class="col-md-6 left-tab overflow-auto">
                    <div class="requests_header" style="padding: 0 20px 20px;">
                        <form id="request_filters" class="form-group">
                            <div class="row">
                                <div class="col-md-12">
                                    <input class="search-input" type="search" placeholder="الرقم" id="request_uni_id"
                                        name="request_uni_id" />
                                    <input class="search-input" type="search" placeholder="الاسم" id="request_name"
                                        name="request_name" />
                                    <input class="search-input" type="search" placeholder="الاب" id="request_father_name"
                                        name="request_father_name" />
                                    <input class="search-input" type="search" placeholder="الجد ١"
                                        id="request_grand_father_name" name="request_grand_father_name" />
                                    <input class="search-input" type="search" placeholder="الجد ٢"
                                        id="request_grand_father_name_1" name="request_grand_father_name_1" />
                                    <input class="search-input" type="search" placeholder="الجد ٣"
                                        id="request_grand_father_name_2" name="request_grand_father_name_2" />
                                    <!-- <button class="button must-read-btn" data-toggle="modal" data-target="#mustReadModal">هام جداً</button> -->
                                    <button class="btn btn-danger must-read-btn" data-toggle="modal"
                                        data-target="#mustReadModal">هام</button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 text-right m-t-15">
                                    <button type="submit" class="btn btn-primary">بحث</button>
                                    <a href="javascript:void(0);" class="btn btn-default" id="clear_requests_search">مسح</a>
                                </div>
                            </div>
                        </form>
                        <!-- <div class='radio-group inline'>
                                                                                                <div class="radio">
                                                                         <input type="radio" name="request_type" value="all_requests" id="all_requests">
                                                                         <label for="all_requests">All</label>
                                                                         <input type="radio" name="request_type" value="ready_for_review" id="ready_for_review"  checked="">
                                                                         <label for="ready_for_review">Ready for Review</label>
                                                                         <input type="radio" name="request_type" value="completed" id="completed_requests">
                                                                         <label for="completed_requests">Completed</label>
                                                                         <input type="radio" name="request_type" value="on_hold" id="on_hold_request">
                                                                         <label for="on_hold_request">On Hold</label>
                                                                         </div>
                                                                            </div> -->
                        <div style="display: flex;">
                            <div class="" style="flex: auto">
                                <input type="radio" name="request_type" value="all_requests" id="all_requests">
                                <label class="inline" for="all_requests">All</label>
                            </div>
                            <div class="" style="flex: auto">
                                <input type="radio" name="request_type" value="ready_for_review" id="ready_for_review"
                                    checked="">
                                <label class="inline" for="ready_for_review">Ready for Review</label>
                            </div>
                            <div class="" style="flex: auto">
                                <input type="radio" name="request_type" value="completed" id="completed_requests">
                                <label class="inline" for="completed_requests">Completed</label>
                            </div>
                            <div class="" style="flex: auto">
                                <input type="radio" name="request_type" value="on_hold" id="on_hold_request">
                                <label class="inline" for="on_hold_request">On Hold</label>
                            </div>
                            <div class="" style="flex: auto">
                                <label class="control-label requests_counter"
                                    style="display: inline-block; float: left;direction: ltr;">Total: <span
                                        class="count">--</span></label>
                            </div>
                        </div>
                        <hr>
                    </div>
                    <div id="requests_container_top"></div>
                    <div id="requests_container">
                        @foreach ($requests as $request)
                            <div class="row request-container request_type_{{ $request->request_status() }}"
                                id="{{ $request->id }}" data-old_status = "{{ $request->request_status() }}">
                                <div class="col-sm-2 request-controls">
                                    <div class="ltr text-center">
                                        <ul class="nav quick-section">
                                            <li class="quicklinks actions" style="float: none;">
                                                <a id="gear-icon" class="context_menu_btn dropdown-toggle pull-right"
                                                    href="#" data-toggle="dropdown">
                                                    <i class="fa fa-gear"></i>
                                                </a>

                                                <ul class="dropdown-menu custom-listing-menu" role="menu"
                                                    aria-labelledby="user-options">

                                                    {{-- ✅ Copy Data (only for ready_for_review) --}}
                                                    @if ($request->status == 'ready_for_review')
                                                        <li>
                                                            <a class="copy-data" href="javascript:void(0);"
                                                                data-id="{{ $request->id }}"
                                                                data-gender="{{ $request->gender }}"
                                                                data-name="{{ $request->name }}"
                                                                data-url="{{ route('admin.memberrequests.copy', $request->id) }}">
                                                                نسخ المعلومات من الإستمارة
                                                            </a>
                                                        </li>
                                                        <li class="divider"></li>
                                                    @endif

                                                    {{-- ✅ Open Registration Form --}}
                                                    <li>
                                                        <a target="_blank"
                                                            href="{{ route('familyappregisteration.edit', $request->id) }}">
                                                            إستمارة التسجيل
                                                        </a>
                                                        {{-- <a href="#">
                                                            إستمارة التسجيل
                                                        </a> --}}
                                                    </li>

                                                    <li class="divider"></li>

                                                    {{-- ✅ Change Status options --}}
                                                    @if ($request->status !== 'ready_for_review')
                                                        {{-- <li class="change-status" data-status="ready_for_review"
                                                            data-url="{{ route('admin.memberrequests.changestatus', $request->id) }}">
                                                            <a href="javascript:void(0);">تغيير إلى جاهز للتحقق Ready</a>
                                                        </li> --}}
                                                        <li class="change-status-review"
                                                            data-status="ready_for_review"data-id="{{ $request->id }}">
                                                            <a href="javascript:void(0);">تغيير إلى جاهز للتحقق Ready</a>
                                                        </li>
                                                        <li class="divider status-divider"></li>
                                                    @endif

                                                    @if ($request->status !== 'completed')
                                                        <li class="change-status-completed"
                                                            data-status="completed"data-id="{{ $request->id }}">
                                                            <a href="javascript:void(0);">تغيير إلى منتهي Completed</a>
                                                        </li>
                                                        <li class="divider status-divider"></li>
                                                    @endif

                                                    @if ($request->status !== 'on_hold')
                                                        <li class="change-status" data-status="on_hold"
                                                            data-url="{{ route('admin.memberrequests.changestatus', $request->id) }}">
                                                            <a href="javascript:void(0);">تغيير إلى معلق On-Hold</a>
                                                        </li>
                                                        <li class="divider status-divider"></li>
                                                    @endif

                                                    @if ($request->status !== 'pending')
                                                        <li class="change-status" data-status="pending"
                                                            data-url="{{ route('admin.memberrequests.changestatus', $request->id) }}">
                                                            <a href="javascript:void(0);">تغيير إلى إنتظار Pending</a>
                                                        </li>
                                                    @endif

                                                    {{-- ✅ Send Notification (only for completed requests) --}}
                                                    @if ($request->status == 'completed')
                                                        <li class="divider"></li>
                                                        <li class="send-notification" data-id="{{ $request->id }}">
                                                            <a href="javascript:void(0);">إرسال تنبيه Send Notification</a>
                                                        </li>
                                                    @endif


                                                    {{-- ✅ Debug info (optional) --}}
                                                    {{-- <p>Status: {{ $request->status }}</p> --}}
                                                    {{-- <p>ID: {{ $request->id }}</p> --}}

                                                </ul>
                                            </li>
                                        </ul>

                                        <br>
                                        <div class="status">
                                            @if ($request->status == 'ready_for_review')
                                                <i class="fa fa-exclamation golden"></i>
                                            @elseif($request->status == 'completed')
                                                <i class="fa fa-check green"></i>
                                            @elseif($request->status == 'on_hold')
                                                <i class="fa fa-times red"></i>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-10 personal-info">
                                    <div class="row">
                                        <div class="col-sm-3 ltr">
                                            <b>{{ $request->mobile_number }}</b>
                                        </div>
                                        <div class="col-sm-8">
                                            <label
                                                class="control-label">{{ $request->name . ' ' . $request->father_name . ' ' . $request->grand_father_name . ' ' . $request->grand_father_name_1 . ' ' . $request->grand_father_name_2 }}</label>
                                        </div>
                                        <div class="col-sm-1">
                                            <label class="control-label request-label">الاسم</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-11">
                                            <label
                                                class="control-label">{{ $request->grand_father_name_3 . ' ' . $request->grand_father_name_4 . ' ' . $request->grand_father_name_5 . ' ' . $request->grand_father_name_6 . ' ' . $request->grand_father_name_7 }}</label>
                                        </div>
                                        <div class="col-sm-1">
                                            <!-- <label class="control-label request-label">الجد</label> -->
                                        </div>
                                    </div>
                                    <hr>
                                    <div id="siblings_children_details">
                                        <div class="row">
                                            <div class="col-sm-4 ltr">
                                                Request ID: <b>{{ $request->uni_id ?? $request->request_id }}</b>
                                            </div>

                                            <div class="col-sm-8" style="margin-bottom: 10px !important;">
                                                <label class="control-label request-label">الأبناء و البنات</label>
                                                {!! $request->children_names() !!}
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <label
                                                    class="control-label request-label request-label {{ empty($request->children_names()) ? '' : 'm-t-5' }}">الأخوة
                                                    والأخوات</label>
                                                {!! $request->sibling_names() !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-6 right-tab overflow-auto" style="border-left: 1px dashed;">
                    <div id="filters_container" style="padding: 0 20px 20px; text-align: center;">
                        <form id="tree_filters">
                            <div class="row">
                                <div class="col-md-12">
                                    <input class="search-input" type="search" placeholder="الرقم" id="search_id"
                                        name="id" />
                                    <input class="search-input" type="search" placeholder="الهوية" id="search_nodeID"
                                        name="nodeID" />
                                    <input class="search-input" type="search" placeholder="الاسم" id="search_name"
                                        name="name" />
                                    <input class="search-input" type="search" placeholder="الاب"
                                        id="search_father_name" name="father_name" />
                                    <input class="search-input" type="search" placeholder="الجد ١"
                                        id="search_grand_father_name" name="grand_father_name" />
                                    <input class="search-input" type="search" placeholder="الجد ٢"
                                        id="search_g_grand_father_name" name="g_grand_father_name" />
                                    <input class="search-input" type="search" placeholder="الجد ٣"
                                        id="search_next_g_grand_father_one" name="next_g_grand_father_one" />
                                </div>
                            </div>
                            <div class="row m-t-15" style="margin-left: -35px;">
                                <div class="col-md-8" style="padding: 0;">
                                    <div id="search_results_container">
                                        <span id="search_results"></span>
                                        <br><span class="selected_node_name"> </span> <br>
                                        <a href="javascript:void(0)" id="next_search">التالي</a> |
                                        <a href="javascript:void(0)" id="prev_search" class="disabled-link">سابق</a>
                                    </div>
                                </div>
                                <div class="col-md-4 text-right ">
                                    <button type="submit" class="btn btn-primary">بحث</button>
                                    <a href="javascript:void(0);" class="btn btn-default" id="clear_tree_search">مسح</a>
                                </div>
                            </div>
                        </form>

                        <hr class="m-0 m-t-10" />
                    </div>
                    <div style="position: fixed; left: 40px; display: none;" class="tree-legend"><img
                            src="{{ asset('assets/cpanel/images/tree-legend.png') }}" style="width: 120px;" /></div>
                    <div id="family_tree_element_top"></div>
                    <div id="family_tree_element"></div>
                </div>
            </div>

        </div>
    </div>

    @include('admin.familytree.shared.tree_actions')
@endsection

@include('admin.familytree.shared.tree_script')