@extends('user.layouts.template')

@section('style')
    <style>
        .p-0 {
            padding: 0px !important;
        }

        #prop_names_container {
            height: 100px;
            overflow-y: auto;
        }

        .form-check-input {
            border-color: #aaaaaa;
        }

        tr.bg-success {
            background-color: #c3e6cb !important;
        }
        tr.bg-danger {
            background-color: #ffececff !important;
        }
    </style>
@endsection

@section('content')
    @php
        $permission = session()->get('permissions');
    @endphp
    <!-- Content Start -->
    <div class="content__boxed">
        <div class="content__wrap">

                    <div id="page-titl">
                Team Management <i class="ri-arrow-right-s-line"></i> Property Assign
            </div>

            <div class="card mt-4">
                <div class="card-body p-0 overflow-hidden">
                    <div class="row justify-content-between fs-5">
                        <div class="col-lg-5 border-end border-black py-1">
                            <div class="row border-bottom border-black py-2">
                                <div class="col-lg-4 fw-medium text-black ps-5">User Name</div>
                                <div class="col-lg-8">{{ $user->name ?? '-' }}</div>
                            </div>
                            <div class="row border-bottom border-black py-2">
                                <div class="col-lg-4 fw-medium text-black ps-5">Phone</div>
                                <div class="col-lg-8">{{ $user->mobile ?? '-' }}</div>
                            </div>
                            <div class="row border-bottom border-black py-2">
                                <div class="col-lg-4 fw-medium text-black ps-5">Email</div>
                                <div class="col-lg-8">{{ $user->email ?? '-' }}</div>
                            </div>
                            <div class="row py-2">
                                <div class="col-lg-4 fw-medium text-black ps-5">Role</div>
                                <div class="col-lg-8">{{ $user->role_name ?? '-' }}</div>
                            </div>
                        </div>
                        <div class="col-lg-7 py-2">
                            <div class="ps-3 pt-1 pe-4">
                                <p class="fs-5 fw-medium text-black">Assigned Properties</p>
                                <div id="prop_names_container">
                                    @php
                                        $properties_name = "Null";
                                        if (!empty($all_properties)) {
                                            foreach ($all_properties as $properties) {
                                                if (in_array($properties->id, $assigned_property_ids)) {
                                                    if ($properties_name == "Null") {
                                                        $properties_name = "";
                                                    }
                                                    $properties_name .= $properties->name . ", ";
                                                }
                                            }
                                        }
                                        $properties_name = rtrim($properties_name, ', ');
                                        echo $properties_name;
                                    @endphp
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mt-4">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped my-3" id="dataTable">
                            <thead>
                                <tr>
                                    <th scope="col">Property</th>
                                    <th scope="col">City</th>
                                    <th scope="col">Assign Property</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (!empty($all_properties))

                                    @foreach($all_properties as $property)
                                        <tr>
                                            <td>
                                                <span class="py-2 d-block">
                                                    {{ $property->name ?? "-" }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="py-2 d-block">
                                                    {{ $property->city ?? "-" }} {{ $property->state ?? "-" }}
                                            </td>
                                            </span>
                                            <td>
                                                <span class="py-2 d-block">
                                                    <label class="d-flex justify-content-start align-items-center">
                                                        <input type="checkbox" class="form-check-input" value="{{ $property->id }}"
                                                            {{ in_array($property->id, $assigned_property_ids) ? 'checked' : '' }}>
                                                        <span class="fs-5 ms-2">Select</span>
                                                    </label>
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="mt-3 text-end">
                <button class="btn btn-primary me-2" id="save">Save</button>
                <a href="{{ route('assignProperty') }}" class="btn btn-danger">Cancel</a>
            </div>

        </div>
    </div>
    <!-- Content End -->
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $('#dataTable').DataTable();
        $('#save').on('click', function () {
            var selected = [];
            $('.form-check-input').each(function () {
                if ($(this).is(':checked')) {
                    if($(this).val() != 'on'){
                        selected.push($(this).val());
                    }
                }
            });
            $.ajax({
                url: "{{ route('assignPropertyUpdateApi') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    user_id: "{{ $user->id }}",
                    property_ids: selected
                },
                success: function (response) {
                    if (response.status == 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: response.message,
                        });
                        if(response.data){
                            $('#prop_names_container').html(response.data);
                        }
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message,
                        });
                    }
                },
                error: function (xhr, status, error) {
                    console.log(error);
                }
            });
        });
    </script>
@endsection