@extends('layouts.tenant.master')
@section('title', 'User Menu')

@section('css')
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap JS (no jQuery required) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>

    <link rel="stylesheet" type="text/css" href="{{ dynamic_url('assets/main/css/owlcarousel.css') }}">
    {{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"/> --}}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script> --}}
@endsection

@section('style')
    <style>
        /* Hide the <br> tag by default */
        .tablet-break {
            display: none;
        }

        /* Show the <br> tag only on tablet screens (max-width: 768px) */
        @media (max-width: 768px) {
            .tablet-break {
                display: block;
            }
        }
    </style>

@endsection

@section('breadcrumb-title')
    <h2>Edit <span>User Details</span></h2>
@endsection

@section('breadcrumb-items')
    <li class="breadcrumb-item">Users</li>
    <li class="breadcrumb-item active">Edit</li>
@endsection

@section('content')



    <div class="m-2 card-body">
        @include('partial.message')

        <form method="POST" action="{{ route('tenant_user_update', $edit_user->id) }}">
            @csrf
            @method('PUT')
            <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="importModalLabel">Edit Product Catalog Visibility & Point Factors
                            </h5>
                            <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="container">
                                <div class="row">
                                    <!-- Left column: Catalog Checkboxes -->
                                    <div class="col-lg-4">
                                        <h6>Visibility To User</h6>
                                        <hr>
                                        <div class="form-group">
                                            <div class="checkbox-group">
                                                @forelse ($product_catalogs as $product_catalog)
                                                    <div class="form-check">
                                                        <input type="checkbox"
                                                            name="catalog_visibility[{{ $product_catalog->id }}]"
                                                            id="checkbox-primary-{{ $product_catalog->id }}"
                                                            class="form-check-input product-catalog-checkbox"
                                                            data-catalog-id="{{ $product_catalog->id }}"
                                                            value="{{ $product_catalog->id }}"
                                                            {{ isset($selected_catalogs) && in_array($product_catalog->id, $selected_catalogs) ? 'checked' : '' }}>
                                                        <label class="form-check-label"
                                                            for="checkbox-primary-{{ $product_catalog->id }}">
                                                            {{ $product_catalog->name }}
                                                        </label>
                                                    </div>
                                                @empty
                                                    <!-- Empty state: Still allow user to add catalogs later -->
                                                @endforelse
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Right column: Door Colors & Factors -->
                                    <div class="col-lg-8">
                                        <h6>Door Point Factors</h6>
                                        <hr>
                                        @forelse ($product_catalogs as $product_catalog)
                                            <div class="door-colors-container" data-catalog-id="{{ $product_catalog->id }}"
                                                style="{{ isset($selected_catalogs) && in_array($product_catalog->id, $selected_catalogs) ? 'display:block;' : 'display:none;' }}">

                                                @forelse ($door_colors->where('productCatalog.id', $product_catalog->id) as $door_color)
                                                    <div class="mb-2 col-lg-12">
                                                        <div class="form-group">
                                                            <strong class="f-w-400">
                                                                {{ $door_color->product_label }} -
                                                                ({{ $door_color->productCatalog->name }})
                                                            </strong>
                                                            <input type="text"
                                                                name="door_factors[{{ $product_catalog->id }}][{{ $door_color->id }}]"
                                                                placeholder="Door Point Factor for {{ $door_color->product_label }}"
                                                                class="form-control"
                                                                value="{{ optional($existing_factors[$product_catalog->id] ?? collect())->where('door_style', $door_color->id)->first()->factor ?? '' }}">
                                                        </div>
                                                    </div>
                                                @empty
                                                    <!-- Empty state: No door colors available, but user can set later -->
                                                @endforelse

                                            </div>
                                        @empty
                                            <!-- Empty state: No catalogs yet, so no door factors will be displayed -->
                                        @endforelse

                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="modal-body">
                            <div class="container">
                                <div class="row">
                                    <!-- Left column: Catalog Checkboxes -->
                                    <div class="col-lg-4">
                                        <h6>Visibility To User</h6>
                                        <hr>
                                        <div class="form-group">
                                            <div class="checkbox-group">
                                                @foreach ($product_catalogs as $product_catalog)
                                                    <div class="form-check">
                                                        <input type="checkbox"
                                                            name="catalog_visibility[{{ $product_catalog->id }}]"
                                                            id="checkbox-primary-{{ $product_catalog->id }}"
                                                            class="form-check-input product-catalog-checkbox"
                                                            data-catalog-id="{{ $product_catalog->id }}"
                                                            value="{{ $product_catalog->id }}"
                                                            {{ in_array($product_catalog->id, $selected_catalogs) ? 'checked' : '' }}>
                                                        <label class="form-check-label"
                                                            for="checkbox-primary-{{ $product_catalog->id }}">
                                                            {{ $product_catalog->name }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Right column: Door Colors & Factors -->
                                    <div class="col-lg-8">
                                        <h6>Door Point Factors</h6>
                                        <hr>

                                        @foreach ($product_catalogs as $product_catalog)
                                            <div class="door-colors-container" data-catalog-id="{{ $product_catalog->id }}"
                                                style="{{ in_array($product_catalog->id, $selected_catalogs) ? 'display:block;' : 'display:none;' }}">

                                                @foreach ($door_colors->where('productCatalog.id', $product_catalog->id) as $door_color)
                                                    <div class="mb-2 col-lg-12">
                                                        <div class="form-group">
                                                            <strong class="f-w-400">
                                                                {{ $door_color->product_label }} -
                                                                ({{ $door_color->productCatalog->name }})
                                                            </strong>
                                                            <input type="text"
                                                                name="door_factors[{{ $product_catalog->id }}][{{ $door_color->id }}]"
                                                                placeholder="Door Point Factor for {{ $door_color->product_label }}"
                                                                class="form-control"
                                                                value="{{ $existing_factors[$product_catalog->id]->where('door_style', $door_color->id)->first()->factor ?? '' }}">
                                                        </div>
                                                    </div>
                                                @endforeach

                                            </div>
                                        @endforeach

                                    </div>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
            <div class="m-2 row">
                {{-- <a href="#" class="pull-right btn btn-outline-dark btn-md btn-import" data-toggle="tooltip">
                    + Product Catalog - (Door point Factors)
                </a> --}}
                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4 ">
                    <div class="form-group">
                        <strong>Product Catalog:<span class="txt-danger">*</span></strong>
                        <a href="#" class="pull-right btn-import form-control b-r-0" data-toggle="tooltip"
                            data-toggle="tooltip" title="Click Me: To Set Point Factors" autofocus>
                            + Set Door Point Factors For Product Catalogs
                        </a>
                    </div>
                </div>
                <!-- User Role -->
                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>User Type: <span class="txt-danger">*</span></strong>
                        <select {{ $edit_user->status == 'approved' ? 'disabled' : '' }}
                            class="js-example-basic-single col-sm-12 form-control b-r-0" id="search_role" name="role_id"
                            required data-toggle="tooltip" title="Select the role of the user">
                            @foreach ($roles as $role)
                                @if ($role->name !== 'Admin')
                                    <option value="{{ $role->name }}"
                                        {{ $role->name == $edit_user->getRoleNames()->first() ? 'selected' : '' }}>
                                        {{ $role->name }}
                                    </option>
                                @endif
                            @endforeach
                        </select>
                        @if ($edit_user->status == 'approved')
                            <input type="hidden" name="role_id" value="{{ $edit_user->getRoleNames()->first() }}">
                        @endif

                    </div>
                </div>

                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4"
                    style="display: {{ $edit_user->getRoleNames()->first() == 'Representative' ? 'none' : 'block' }}"
                    id ="repre_list">
                    <div class="form-group">
                        <strong>Select User's Representative: <span class="txt-danger">*</span></strong>
                        {{-- <select {{ $edit_user->status == 'approved' ? 'disabled' : '' }} --}}
                        <select
                            class="js-example-basic-single col-sm-12 form-control b-r-0" id="search_repre" name="repre_id"
                            data-toggle="tooltip" title="Select the role of the user">

                            @if ($edit_user->getRoleNames()->first() === 'Customer')
                                @foreach ($users as $user)
                                    @if (
                                        $user->getRoleNames()->first() !== 'Representative' &&
                                            $user->getRoleNames()->first() !== 'Admin' &&
                                            $user->getRoleNames()->first() !== 'Customer')
                                        <option value="{{ $user->id }}" {{$edit_user->parent_id == $user->id ? 'selected' : ''}}>
                                            {{ $user->username }}
                                        </option>
                                    @endif
                                @endforeach
                            @else
                                @foreach ($users as $user)
                                    @if ($user->getRoleNames()->first() == 'Representative' && $user->getRoleNames()->first() !== 'Admin')
                                        <option value="{{ $user->id }}" {{$edit_user->parent_id == $user->id ? 'selected' : ''}}>
                                            {{ $user->username }}
                                        </option>
                                    @endif
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>

                <!-- Username -->
                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>User Name &nbsp;<span class="txt-danger">*</span></strong>
                        <input class="form-control" name="username" type="text" value="{{ $edit_user->username }}"
                            placeholder="Enter a unique username" required>
                    </div>
                </div>

                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>First Name &nbsp;<span class="txt-danger">*</span></strong>
                        <input type="text" name="first_name" placeholder="Enter the first name" class="form-control"
                            data-toggle="tooltip" title="Provide the user's first legal name" autofocus
                            value="{{ $edit_user->first_name }}">
                    </div>
                </div>

                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>Last Name &nbsp;<span class="txt-danger">*</span></strong>
                        <input type="text" name="last_name" placeholder="Enter the last name" class="form-control"
                            data-toggle="tooltip" title="Provide the user's last legal name" autofocus
                            value="{{ $edit_user->last_name }}">
                    </div>
                </div>

                <!-- Phone -->
                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>Cell Phone &nbsp;<span class="txt-danger">*</span></strong>
                        <input type="text" name="phone" value="{{ $edit_user->phone }}"
                            placeholder="Enter the cell phone number" class="form-control" required>
                    </div>
                </div>

                <!-- Email -->
                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>Email &nbsp;<span class="txt-danger">*</span></strong>
                        <input type="email" name="email" value="{{ $edit_user->email }}"
                            placeholder="Enter a valid email address" class="form-control" required>
                    </div>
                </div>

                <!-- Password (optional) -->
                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        {{-- <strong>Password &nbsp;<span class="txt-danger">*</span></strong> --}}
                        <strong>Password</strong>
                        <input type="password" name="password" placeholder="Update password if required"
                            class="form-control">
                    </div>
                </div>

                <!-- Country -->
                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>Country &nbsp;<span class="txt-danger">*</span></strong>
                        <input type="text" name="country_id" placeholder="Country" class="form-control"
                            value="{{ $edit_user->country_id }}">
                        {{-- <select class="js-example-basic-single col-sm-12 form-control b-r-0" id="country"
                            name="country_id" required>
                            @foreach ($countries as $key => $country)
                                <option value="{{ $country->id }}"
                                    {{ old('country_id', $edit_user->country_id) == $country->id ? 'selected' : '' }}>
                                    {{ $country->name }}
                                </option>
                            @endforeach
                        </select> --}}
                    </div>
                </div>

                <!-- State -->
                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>State &nbsp;<span class="txt-danger">*</span></strong>

                        <select class="js-example-basic-single col-sm-12 form-control b-r-0" id="state"
                            name="state_id" required>
                            <option value="">Select state</option>
                            @foreach ($states as $key => $state)
                                <option value="{{ $state->id }}"
                                    {{ $edit_user->state_id == $state->id ? 'selected' : '' }}
                                    data-country-id="{{ $state->country_id }}">
                                    {{ $state->name }}
                                </option>
                            @endforeach
                        </select>
                        {{-- <select class="js-example-basic-single col-sm-12 form-control b-r-0"
                                id="search_state_demo"
                                name="state_id" required>
                            @if ($edit_user->state_id)
                                <option value="{{ $edit_user->state_id }}" selected>
                                    {{ $edit_user->state->name }}
                                </option>
                            @endif
                        </select> --}}
                    </div>
                </div>

                <!-- City -->
                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>City &nbsp;<span class="txt-danger">*</span></strong>
                        <input type="text" name="city_id" placeholder="City" class="form-control"
                            value="{{ $edit_user->city_name }}">
                        {{-- <select class="js-example-basic-single col-sm-12 form-control b-r-0" name="city_id"
                            id="city">
                            @foreach ($cities as $key => $city)
                                <option value="{{ $city->id }}" data-country-id="{{ $city->country_id }}"
                                    data-state-id="{{ $city->state_id }}">
                                    {{ $city->name }}
                                </option>
                            @endforeach
                        </select> --}}
                    </div>
                </div>

                <!-- Select2 CSS and JS -->
                <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
                <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>




                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4 ">
                    <div class="form-group">
                        <strong>County</strong>

                        <input type="text" name="county_name" placeholder="Enter Your County Name"
                            class="form-control" data-toggle="tooltip" value="{{ $edit_user->county_name }}"
                            title="Enter Your County Name">

                    </div>
                </div>

                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>Zip &nbsp;<span class="txt-danger">*</span></strong>
                        <input type="text" name="zip_code" placeholder="Enter the ZIP code" class="form-control"
                            data-toggle="tooltip" title="Provide the postal code for the user's address" autofocus
                            value="{{ $edit_user->zip_code }}">
                    </div>
                </div>

                <!-- Tax Exemption -->
                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>Tax Exemption &nbsp;</strong>
                        <div class="checkbox checkbox-primary">
                            <input id="checkbox-primary-0" type="checkbox" name="is_taxable_user"
                                {{ $edit_user->is_taxable_user ? 'checked' : '' }}>
                            <label class="form-label" for="checkbox-primary-0">Is Exempted?</label>
                        </div>
                    </div>
                </div>
                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>Address &nbsp;</strong>
                        <input class="form-control" id="exampleFormControlTextarea4" rows="2"
                            placeholder="Enter the full address" data-toggle="tooltip"
                            title="Provide the complete residential address" name="address"
                            value="{{ $edit_user->address }}">
                    </div>
                </div>
                {{-- <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>Company &nbsp;</strong>
                        <input class="form-control" id=""
                            placeholder="Company Name" name="company_name" value="{{ $edit_user->company_name}}">
                    </div>
                </div> --}}

                <hr>
                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>
                            Business Name
                        </strong>
                        <input type="text" name="business_name" placeholder=" Business Name" class="form-control" value="{{$edit_user->company_name}}">
                    </div>
                </div>

                {{-- <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>
                            Gross Sales
                        </strong>
                        <input type="text" name="gross_sale" placeholder=" Gross Sales" class="form-control">
                    </div>
                </div> --}}
                {{-- <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>
                            Status <span class="txt-danger">*</span>
                        </strong>
                        <select class="form-select status-dropdown" name="status">
                            <option value="approved">Approved
                            </option>
                            <option value="un-approved">
                                Unapproved
                            </option>
                            <option value="block">Block</option>
                        </select>
                        <select class="js-example-basic-single col-sm-12 form-control b-r-0" name="role_id"
                             data-toggle="tooltip" title="Select the Status of the user, such as Approved or Block"
                            autofocus>
                            <option value=""></option>
                        </select>
                    </div>
                </div> --}}
                <div class="text-center col-xs-12 col-sm-12 col-md-12">
                    <button type="submit" class="mt-2 mb-3 btn btn-primary btn-sm"> Update User</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')

    <script src="{{ dynamic_url('assets/main/js/select2/select2.full.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        @if (session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: '{{ session('success') }}',
                confirmButtonColor: '#3085d6',
                timer: 3000
            });
        @endif

        @if (session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: '{{ session('error') }}',
                confirmButtonColor: '#d33',
                timer: 3000
            });
        @endif
    </script>
    <script>
        $(document).ready(function() {
            $('#search_role').on('change', function() {
                const selectedRole = $(this).val();
                if (selectedRole === 'Representative') {
                    $('#repre_list').hide();
                } else {
                    $('#repre_list').show();
                }

            });

            // Trigger on page load
            $('#search_role').trigger('change');
        });
    </script>



    <script>
        $(document).ready(function() {
            $(".btn-import").click(function() {
                $('#importModal').modal('show');
            });

            $(document).ready(function() {
                // Store all state and city options
                const allStates = $('#state option');
                const allCities = $('#city option');
                $('#country').on('change', function() {
                    const selectedCountry = $(this).val();
                    // Filter states
                    const filteredStates = allStates.filter(function() {
                        return $(this).data('country-id') == selectedCountry || $(this)
                            .val() == "";
                    });

                    const filteredCities = allCities.filter(function() {
                        return $(this).data('country-id') == selectedCountry || $(this)
                            .val() == "";
                    });

                    // Update state and city dropdowns
                    $('#state').html(filteredStates.clone());
                    $('#city').html(filteredCities.clone());

                    // Reset selections
                    $('#state').val("").trigger('change');
                    $('#city').val("").trigger('change');
                });

                $('#state').on('change', function() {
                    const selectedState = $(this).val();

                    const filteredCities = allCities.filter(function() {
                        return $(this).data('state-id') == selectedState || $(this).val() ==
                            "";
                    });

                    $('#city').html(filteredCities.clone());
                    $('#city').val("").trigger('change');

                });
            });
        });
    </script>

    <!-- JavaScript to Toggle Door Colors Based on Selected Catalogs -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const catalogCheckboxes = document.querySelectorAll(".product-catalog-checkbox");
            catalogCheckboxes.forEach(checkbox => {
                checkbox.addEventListener("change", function() {
                    const catalogId = this.dataset.catalogId;
                    const doorColorsContainer = document.querySelector(
                        `.door-colors-container[data-catalog-id='${catalogId}']`);
                    if (this.checked) {
                        doorColorsContainer.style.display = "block";
                    } else {
                        doorColorsContainer.style.display = "none";
                        // Clear input values when hiding
                        doorColorsContainer.querySelectorAll("input").forEach(input => input.value =
                            "");
                    }
                });
            });
        });
    </script>
@endsection