@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>Create <span>User </span></h2>
@endsection

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

@section('content')



    <div class="m-2 card-body">
        @include('partial.message')
        <form method="POST" action="{{ route('tenant_user_store') }}">
            @csrf
            <!-- Product Catalog Visibility Modal -->
            <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="exampleModalLabel">Product Catalog Visibility & their 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: 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 }}">
                                                        <label class="form-check-label"
                                                            for="checkbox-primary-{{ $product_catalog->id }}">
                                                            {{ $product_catalog->name }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Right column: Door Colors -->
                                    <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="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" style="font-size: 14px;"
                                                                name="door_factors[{{ $product_catalog->id }}][{{ $door_color->id }}]"
                                                                placeholder="Door point Factor For {{ $door_color->product_label }}"
                                                                class="form-control">
                                                        </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>
                <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 class="js-example-basic-single col-sm-12 form-control b-r-0" name="role_id"
                            title="Select the role of the user">
                            @foreach ($roles as $role)
                                @if ($role->name !== 'Admin')
                                    <option value="{{ $role->id }}">
                                        {{ $role->name }}
                                    </option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                </div>
                <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" id="" type="text"
                            placeholder="Enter a unique username" data-toggle="tooltip"
                            title="Provide a unique username for the user" autofocus>
                    </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>
                    </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>
                    </div>
                </div>

                <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" placeholder="Enter the cell phone number" class="form-control"
                            data-toggle="tooltip" title="Provide a valid mobile number, e.g., 1234567890" autofocus>
                    </div>
                </div>

                <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" placeholder="Enter a valid email address"
                            class="form-control" data-toggle="tooltip"
                            title="Provide a valid email, e.g., user@example.com" autofocus>
                    </div>
                </div>

                <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>Password &nbsp;</strong>
                        <input type="password" name="password" placeholder="Create a strong password"
                            class="form-control" data-toggle="tooltip"
                            title="Enter a secure password with at least 8 characters">
                    </div>
                </div>

                <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">
                        {{-- <select name="country_id" class="col-sm-12 form-control b-r-0" id="country" required>
                            @foreach ($countries as $key => $country)
                                <option value="{{ $country->id }}">
                                    {{ $country->name }}
                                </option>
                            @endforeach
                        </select> --}}
                    </div>
                </div>

                <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 name="state_id" class="js-example-basic-single col-sm-12 form-control b-r-0"
                            id="state" required>
                            @foreach ($states as $key => $state)
                                <option value="{{ $state->id }}" data-country-id="{{ $state->country_id }}">
                                    {{ $state->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <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">
                        {{-- <select name="city_id" class="js-example-basic-single col-sm-12 form-control b-r-0"
                            id="city">
                            @foreach ($cities as $key => $city)
                                <option value="{{ $city->id }}" data-state-id="{{ $city->state_id }}"
                                    data-country-id="{{ $city->country_id }}">
                                    {{ $city->name }}
                                </option>
                            @endforeach
                        </select> --}}
                    </div>
                </div>
                <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" title="Enter Your County Name">
                        {{-- <select class="js-example-basic-single col-sm-12 form-control b-r-0" id="search_county"
                            name="county_id" autofocus>
                        </select> --}}
                    </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;</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>
                    </div>
                </div>

                <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" id="is_taxable_user">
                            <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>
                        <textarea class="form-control" id="exampleFormControlTextarea4" rows="2" placeholder="Enter the full address"
                            data-toggle="tooltip" title="Provide the complete residential address" name="address"></textarea>
                    </div>
                </div>
                {{-- <div class="p-2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="form-group">
                        <strong>Note &nbsp;</strong>
                        <textarea class="form-control" id="exampleFormControlTextarea4" rows="2"
                            placeholder="Type something about this user." name="note"></textarea>
                    </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">
                    </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"> Create User</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')

    <script src="{{ dynamic_url('assets/main/js/select2/select2.full.min.js') }}"></script>
    {{-- <script src="{{ route('/') }}/assets/main/js/select2/select2-custom.js"></script> --}}
    <script type="text/javascript">
        $(document).ready(function() {
            // Store all state and city options
            const allCities = $('#city option');
            const allStates = $('#state option');
            $('#country').on('change', function() {
                const selectedCountry = $(this).val();
                // Filter states
                const filteredStates = allStates.filter(function() {
                    return $(this).data('country-id') == selectedCountry || $(this)
                        .val() == "";
                });

                // Update state and city dropdowns
                $('#state').html(filteredStates.clone());
                $('#state').val("").trigger('change');
            });

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

                // Filter cities
                const filteredCities = allCities.filter(function() {
                    return $(this).data('state-id') == selectedState || $(this).val() == "";
                });
                $('#city').html(filteredCities);
                $('#city').val("").trigger('change');
            });

        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const catalogCheckboxes = document.querySelectorAll('.product-catalog-checkbox');
            const doorColorsContainer = document.getElementById('door-colors-container');

            catalogCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const catalogId = this.dataset.catalogId;
                    const doorColorDivs = doorColorsContainer.querySelectorAll(
                        `.catalog-door-colors[data-catalog-id="${catalogId}"]`
                    );

                    if (this.checked) {
                        doorColorDivs.forEach(div => {
                            div.style.display = 'block';
                        });
                    } else {
                        doorColorDivs.forEach(div => {
                            div.style.display = 'none';
                        });
                    }
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $(".btn-import").click(function() {
                $('#importModal').modal('show');
            });
        });
    </script>

    <script>
        // Show/Hide door factors for selected catalogs
        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