@extends('layouts.contentLayoutMaster')

{{-- page title --}}
@include('panels.page-title')

{{-- vendor style --}}
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/flag-icon/css/flag-icon.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2-materialize.css')}}">
@endsection

@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/form-select2.css')}}">
@endsection

{{-- page content --}}
@section('content')
<div class="section">
    <div class="card">
    </div>

  <!-- HTML VALIDATION  -->

<style>



    .cart-h4{
        padding:15px 0;
    }

    .lable-view{
        padding-left:5px;
    }

    .view-row{
        display:flex;
        align-items:center;
        border-bottom: 1px solid #6b6f8285;
    }
    .custome-date-input::placeholder {
    color: #9e9e9e !important;
    font-size: 14px !important;
}

.custome-date-input {
    caret-color: transparent;
}
</style>


  <!------------------------------------------------------------------------------------------------------------------------------------------>
    <div class="row">                    
        <div class="content-wrapper-before  gradient-45deg-indigo-purple ">
        </div>
              
        {{--<div class="breadcrumbs-dark pb-0 pt-4" id="breadcrumbs-wrapper">
         <!-- Search for small screen-->
            <div class="container">
                <div class="row">
                    <div class="col s10 m6 l6">
                        <h5 class="breadcrumbs-title mt-0 mb-0"><span>Company User </span></h5>
                            <ol class="breadcrumbs mb-0">
                                <li class="breadcrumb-item ">
                                    <a href="https://storecom.in/e-invoice/public/modern">Home</a>
                                </li>
                                <li class="breadcrumb-item ">
                                    Company User
                                </li>
                                <li class="breadcrumb-item active">
                                    Company UserList          
                                </li>
                            </ol>
                    </div>
                </div>
            </div>

          
        </div>--}}
    </div>
    
    <div class="users-list-table">
            <div class="col s12">
                <div class="container">
                    <!-- users list start -->
                        <section class="users-list-wrapper section">
                            <div class="users-list-filter">
                                <div class="row">
                                        <div class="card">
                                            <div class="card-content">

                                            <div class="col s12 m6 l12">
                                                <h4 class="card-title cart-h4" >Exports Users</h4>
                                            </div>

                                                <div id="view-file-input">

                                                    <form id="exportForm" action="{{route('report-export',[$userType])}}" method="">
                                                        <div class="row view-row">
                                                            @if(isset($userType) && $userType==config('custom.superadminrole'))
                                                            <div class="col s12 m12 l3 p-0">

                                                                <div class="input-field col s12">
                                                                    <select name="company_code">
                                                                
                                                                        <option value="">Choose {{__('locale.company')}}</option>
                                                                        @if(isset($companies) && !empty($companies))
                                                                            @foreach ($companies as $company_value)
                                                                            <option value="{{$company_value->id}}">{{$company_value->company_name}} ({{$company_value->company_code}})</option>
                                                                            @endforeach
                                                                        @endif
                                                                    </select>
                                                                    <label>{{__('locale.company')}}</label>
                                                                </div>

                                                            </div>
                                                            @else
                                                                <input type="hidden" name="company" value="{{Helper::loginUserCompanyId()}}"/>
                                                            @endif
                                                            
                                                            <div class="col s12 m12 l3 p-0">

                                                                <div class="input-field col s12">
                                                                    <select name="store_code">
                                                                
                                                                        <option value="">Choose {{__('locale.company')}}</option>
                                                                        @if(isset($stores) && !empty($stores))
                                                                            @foreach ($stores as $store_value)
                                                                            <option value="{{$store_value->store_id}}">{{$store_value->store_name}}</option>
                                                                            @endforeach
                                                                        @endif
                                                                    </select>
                                                                    <label>{{__('locale.company')}}</label>
                                                                </div>

                                                            </div>

                                                            <div class="col s12 m12 l2 p-0">

                                                                <div class="input-field col s12">
                                                                <input type="text" class="datepicker custome-date-input" id="from_date" name="from_date" value="{{old('from_date')}}" placeholder="From Date">
                                                                @error('from_date')
                                                                <p style="color:red">{{ $message }}</p>
                                                                @enderror
                                                                <!-- <label class="lable-view">From Date</label> -->
                                                                <span class="red-text" id="from_date_error"></span>
                                                                </div>

                                                            </div>
                                                            

                                                            <div class="col s12 m12 l2 p-0">
                                                                <div class="input-field col s12">
                                                                    <input type="text" class="datepicker custome-date-input" id="to_date" name="to_date" value="{{old('to_date')}}" placeholder="To Date">

                                                                    <!-- <label class="lable-view">To Date</label> -->
                                                                    <span class="red-text" id="to_date_error"></span>
                                                                    @error('to_date')
                                                                    <p style="color:red">{{ $message }}</p>
                                                                    @enderror
                                                                </div>
                                                            </div>

                                                            <div class="col s12 m12 l2">
                                                              
                                                                <button type="submit" id="exportBtn" class="btn waves-effect waves-light right">{{__('locale.export_users')}}</button>
                                                                    <i class="material-icons right"></i>
                                                           
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>

                                                <!-- datatable start -->
                                                <div class="col s12 m6 l3">
                                                    <div class="input-field">
                                                        <label for="serach">Search</label>
                                                        <input id="serach" type="text" name="serach" data-error=".errorTxt12">
                                                    </div>
                                                </div>

                                               
                                                <div class="responsive-table table-result">
                                                    <table class="table">
                                                    <thead>
                                                        <tr>
                                                        <th>S.no</th>
                                                        <th>Company Name</th>
                                                        <th>Store Name</th>
                                                        <th>Customer Name</th>
                                                        <th>Amount</th>
                                                        <th>Date</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                             
                                                    @if(isset($reportlist) && !empty($reportlist))
                                                        @foreach($reportlist as $user_key => $report_value)
                                                        <tr>
                                                            <td>{{$user_key+1}}</td>
                                                            <td>{{$report_value['company_code']}}</td>
                                                            <td>{{$report_value['store_code']}}</td>
                                                            <td>{{$report_value['customer_name']}}</td>
                                                            <td>{{$report_value['amount']}}</td>        
                                                            <td>{{$report_value['date']}}</td>
                                                        </tr>
                                                        @endforeach
                                                    @else
                                                        
                                                        <tr>
                                                        <td colspan="10"><p class="center">{{__('locale.no_record_found')}}</p></td>
                                                        </tr>
                                                        @endif
                                                    </tbody>
                                                    </table>
                                                </div>
                                                <input type="hidden" name="hidden_page" id="hidden_page" value="1">
                                                <!-- datatable ends -->
                                            </div>
                                        </div>
                                </div>
                            </div>

                        </section>
    <!-- users list ends -->
             
            
            <div class="content-overlay"></div>
            
        </div>
        </div>

  <!------------------------------------------------------------------------------------------------------------------------------------------>



</div>

@endsection

{{-- vendor script --}}
@section('vendor-script')
<script src="{{asset('vendors/jquery-validation/jquery.validate.min.js')}}"></script>
<script src="{{asset('vendors/select2/select2.full.min.js')}}"></script>
@endsection

{{-- page script --}}
{{--
@section('page-script')
<script src="{{asset('js/scripts/form-select2.js')}}"></script>
@endsection
--}}

{{-- page script --}}
@section('page-script')
<script src="{{asset('js/scripts/form-validation.js')}}"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<script>
  window.onload=function(){
    var country_value = "{{(isset($company_result->country) && $company_result->country!='NULL') ? $company_result->country : old('country')}}";
    var state_value = "{{(isset($company_result->state) && $company_result->state!='NULL') ? $company_result->state : old('state')}}";
    var city_value = "{{(isset($company_result->city) && $company_result->city!='NULL') ? $company_result->city : old('state')}}";
    var blocked = "{{(isset($company_result->blocked) && $company_result->blocked!='NULL') ? $company_result->blocked : 1}}";
    console.log(country_value,state_value);
    // $('#country').val(country_value);
    // $('#country').select2().select2('val', country_value)
    $('#country').val(country_value).trigger('change');
    $('#state').val(state_value).trigger('change');
    $('#city').val(city_value).trigger('change');
    // $('#country').formSelect();
    // $('#state').val(state_value);
    // $('#state').formSelect();
    // $('#city').val(city_value);
    // $('#city').formSelect();
    $('#blocked').val(blocked);
    $('#blocked').formSelect();
  }
    $(document).ready(function () {
      $(".select2").select2({
          /* the following code is used to disable x-scrollbar when click in select input and
          take 100% width in responsive also */
          dropdownAutoWidth: true,
          width: '100%',
      });
      
      $('#country').select2({})
        .on("select2:select", function (e) {
        console.log("select2:select")
        var data = e.params.data;
        console.log(data.id);
          $.ajax({
            url: "{{url('api/user-fetch-states')}}",
            type: "POST",
            data: {
                country_id: data.id,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            
            success: function (result) {
              console.log(result);
                $('#state').html('<option value="">Select State</option>');
                $.each(result.states, function (key, value) {
                    $("#state").append('<option value="' + value
                        .id + '">' + value.name + '</option>');
                });
                $('#state').formSelect();
                $('#city').html('<option value="">Select City</option>');
            }
        });
      });

      $('#state').select2({})
        .on("select2:select", function (e) {
        console.log("select2:select")
        var data = e.params.data;
        console.log(data.id);
        $.ajax({
            url: "{{url('api/user-fetch-cities')}}",
            type: "POST",
            data: {
                state_id: data.id,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            success: function (res) {
                $('#city').html('<option value="">Select City</option>');
                $.each(res.cities, function (key, value) {
                    $("#city").append('<option value="' + value
                        .id + '">' + value.name + '</option>');
                });
                $('#city').formSelect();
            }
        });
      });
      
     

        // Or with jQuery

        // $(document).ready(function(){
        //     $('.datepicker').datepicker();
        // });

        
    });

    $(document).ready(function() {
        // Datepicker initialization
        $('#from_date').datepicker({
            dateFormat: 'yy-mm-dd', // Ensure date format matches backend expectations
            changeMonth: true,
            changeYear: true,
            onSelect: function(dateText, inst) {
                console.log('dateText',dateText,inst);
                var inputId = inst.id; // Get the ID of the datepicker input that triggered the selection
                if (inputId === 'from_date') {
                    $('#from_date_error').text('').removeClass('red-text');
                } else if (inputId === 'to_date') {
                    $('#to_date_error').text('').removeClass('red-text');
                }
            }
        });

        // Form submission validation
        $('#exportForm').on('submit', function(event) {
            
            $('#from_date_error').html('');
            $('#to_date_error').html('');
            // Get selected dates
            var fromDateObj = $('#from_date').val();//datepicker('getDate'); // Fetch date object
            var toDateObj = $('#to_date').val();//.datepicker('getDate'); // Fetch date object
            // alert(fromDateObj);
            // Format dates to 'yy-mm-dd'
            var fromDate = new Date(fromDateObj);//$.datepicker.formatDate('yy-mm-dd', fromDateObj);
            var toDate = new Date(toDateObj);//$.datepicker.formatDate('yy-mm-dd', toDateObj);
            // alert('fsfsf'+ toDate);

            if (isNaN(fromDate.getTime())) {
                // alert('please select date');
                $('#from_date_error').text('Please select date').addClass('red-text');
                return false;
            }
            if( isNaN(toDate.getTime())){
                $('#to_date_error').text('Please select date').addClass('red-text');
                return false;
            }
            
            // Compare dates
            if (fromDate < toDate) {
                // alert('if toDate');
                // event.preventDefault();
                // Dates are valid, continue with form submission
                return true;
            } else {
                // alert('fromDate')
                // $('#from_date_error').text('From date must be greater than To date.').addClass('red-text');
                $('#to_date_error').text('From date must be greater than To date.').addClass('red-text');
                // alert('From date must be greater than To date.');
                event.preventDefault(); // Prevent form submission
                return false;
            }
        });
    });
</script>
@endsection