@extends('dashboard.layout.content')

@section('customTitle')
{{ __('general.show_users') }}
@endsection

@section('customStyle')
<link href='{{ asset("dashboard/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
@endsection

@section('customBody')

<x-layout.widget>

    <x-dtables.users.table.filter></x-dtables.users.table.filter>

    <x-dtables.users></x-dtables.users>

</x-layout.widget>

@endsection

@section('customScript')
<script>
    $("#users-menu-box").attr("data-active", "true")

    
    $("#countryFilter,#cityFilter,#genderFilter,#classFilter,#companyFilter,#branchFilter,#statusFilter").on("change",function(){
        reloadDataTable(usersTable,{
            country : $("#countryFilter").val(),
            city : $("#cityFilter").val(),
            gender : $("#genderFilter").val(),
            class : $("#classFilter").val(),
            status : $("#statusFilter").val(),
        });
    });

    $('#countryFilter').on('change', function() {
        $.ajax({
            url: "{{ route('dashboard.CityDependsOnCountryOrAll') }}",
            data: {
                country_id: $(this).val(),
            },
            success(result) {
                $('#cityFilter').html(result);
            },
        });
    });

    $('#companyFilter').on('change', function() {
        $.ajax({
            url: "{{ route('dashboard.BranchDependsOnCompanyOrAll') }}",
            data: {
                company_id: $(this).val(),
            },
            success(result) {
                $('#branchFilter').html(result);
            },
        });
    });

    ajaxSelect2('#companyFilter','/dashboard/select2/companies',{
        withAll:true
    });
    
    ajaxSelect2('#countryFilter','/dashboard/select2/countries',{
        withAll:true
    });

</script>

@endsection