@extends('hybercube.layouts.app', ['page' => 'appointment'])

@section('title', 'HyperCube')

@section('content')
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">HyperCube</h3>
                <div class="row">
                    <div class="row">
                        <div class="col-md-3">
                      
                            <input type="radio" id="RemployeeID" name="employee" value="employeeID"> employeeID<br>
                            <input type="radio" id="Rfirstname" name="employee" value="firstname"> firstname<br>
                            <input type="radio" id="Rlastname" name="employee" value="lastname"> lastname<br>
                            <input type="radio" id="Remployee_country"name="employee" value="employee_country"> country<br>
                            <input type="radio" id="Remployee_city"name="employee" value="employee_city"> city<br>
                        
                        </div>
                        <div class="col-md-3">
                            <input type="radio" id="RcustomerID" name="customer" value="customerID"> customerID<br>
                            <input type="radio" id="RcustomerName" name="customer" value="customerName"> customerName<br>
                            <input type="radio" id="Rcustomer_country"name="customer" value="customer_country"> country<br>
                            <input type="radio" id="Rcustomer_city"name="customer" value="customer_city"> city<br>
                        </div>
                        <div class="col-md-3">
                            <input type="radio" id="year" name="time" value="year"> Year<br>
                            <input type="radio" id="month" name="time" value="month"> Month<br>

                        </div>
                    </div>
            <form role="form" method="POST" action="{{ route('dice') }}">
                @csrf
                <div class="col-md-3" id="employeeIDDiv">
                <select  class="form-control select2 " multiple  style="width:100%"
                    name="employeeID[]" id="employeeID">
                    <option value="-99">Please Select employeeID</option>
                    @foreach ($employees->unique('TD_employee.employeeID') as $employee)
                        <option  value="{{ $employee['TD_employee']['employeeID']}}">
                            {{ $employee['TD_employee']['employeeID']}}
                        </option>
                    @endforeach
                </select>
                
                </div>
                <div class="col-md-3" id="firstnameDiv">
                <select  class="form-control select2 " multiple  style="width:100%"
                    name="firstname[]"
                    id="firstname">
                    <option value="-99">Please Select Employee First Name</option>
                    @foreach ($employees->unique('TD_employee.firstname') as $employee)
                        <option value="{{ $employee['TD_employee']['firstname']}}">
                            {{ $employee['TD_employee']['firstname']}}
                        </option>
                    @endforeach
                </select>
                
                </div>
                <div class="col-md-3" id="lastnameDiv">
                <select  class="form-control select2 " multiple  style="width:100%"
                    name="lastname[]"
                    id="lastname">
                    <option value="-99">Please Select Employee Last Name</option>
                    @foreach ($employees->unique('TD_employee.lastname') as $employee)
                        <option value="{{ $employee['TD_employee']['lastname']}}">
                            {{ $employee['TD_employee']['lastname']}}
                        </option>
                    @endforeach
                </select>
                
                </div>

                <div class="col-md-3"  id="employee_countryDiv">
                <select  class="form-control select2 " multiple  style="width:100%"
                    name="employee_country[]"
                    id="employee_country">
                    <option value="-99">Please Select Country</option>
                    @foreach ($employees->unique('TD_employee.country') as $employee)
                        <option value="{{ $employee['TD_employee']['country']}}">
                            {{ $employee['TD_employee']['country']}}
                        </option>
                    @endforeach
                </select>
                
                </div>
                <div class="col-md-3"   id="employee_cityDiv">
                <select  class="form-control select2 " multiple  style="width:100%"
                    name="employee_city[]"
                    id="city">
                    <option value="-99">Please Select City</option>
                    @foreach ($employees->unique('TD_employee.city') as $employee)
                        <option value="{{ $employee['TD_employee']['city']}}">
                            {{ $employee['TD_employee']['city']}}
                        </option>
                    @endforeach
                </select>
                </div>
                <div class="col-md-2" id="customerIDDiv">
                <select  class="form-control select2 " multiple  style="width:100%"
                    name="customerID[]" id="customerID">
                    <option value="-99">Please Select customerID</option>
                    @foreach ($customers->unique('TD_customer') as $customer)
                        <option value="{{ $customer['TD_customer']['customerID']}}">
                            {{ $customer['TD_customer']['customerID']}}
                        </option>
                    @endforeach
                </select>
                
                </div>
                <div class="col-md-3" id="customerNameDiv">
                <select  class="form-control select2 " multiple  style="width:100%"
                    name="customerName[]"
                    id="customerName">
                    <option value="-99">Please Select Customer Name</option>
                    @foreach ($customers->unique('TD_customer') as $customer)
                        <option value="{{ $customer['TD_customer']['customerName']}}">
                            {{ $customer['TD_customer']['customerName']}}
                        </option>
                    @endforeach
                </select>
                
                </div>
                <div class="col-md-3"  id="customer_countryDiv">
                <select  class="form-control select2 " multiple  style="width:100%"
                    name="customer_country[]"
                    id="customer_country">
                    <option value="-99">Please Select Country</option>
                    @foreach ($customers->unique('TD_customer') as $customer)
                        <option value="{{ $customer['TD_customer']['country']}}">
                            {{ $customer['TD_customer']['country']}}
                        </option>
                    @endforeach
                </select>
                
                </div>
                <div class="col-md-3"   id="customer_cityDiv">
                <select  class="form-control select2 " multiple  style="width:100%"
                    name="customer_city[]"
                    id="city">
                    <option value="-99">Please Select City</option>
                    @foreach ($customers->unique('TD_customer') as $customer)
                        <option value="{{ $customer['TD_customer']['city']}}">
                            {{ $customer['TD_customer']['city']}}
                        </option>
                    @endforeach
                </select>
                </div>
                <div class="col-md-3" id="ordermonthDiv">
                <select  class="form-control select2 " multiple  style="width:100%"
                    name="ordermonth[]" id="ordermonth">
                    <option value="-99">Please Select ordermonth</option>
                    @foreach ($times->unique('TD_time.ordermonth') as $time)
                        <option value="{{ $time['TD_time']['ordermonth']}}">
                            {{ $time['TD_time']['ordermonth']}}
                        </option>
                    @endforeach
                </select>
                
                </div>
                <div class="col-md-3" id="orderyearDiv">
                <select  class="form-control select2 " multiple  style="width:100%"
                    name="orderyear[]"
                    id="orderyear">
                    <option value="-99">Please Select orderyear </option>
                    @foreach ($times->unique('TD_time.orderyear') as $time)
                        <option value="{{ $time['TD_time']['orderyear']}}">
                            {{ $time['TD_time']['orderyear']}}
                        </option>
                    @endforeach
                </select>
                
                </div>

                <div class="col-md-3">
                     <button type="submit" class="btn btn-primary">Slice</button>
               
                
                </div>
                
                </form>
                </div>
            </div>
            <div class="box-body">
                <table class="table table-bordered">
                    <tr>
                       
                        <th>Customer Id</th>
                        <th>Customer Name</th>
                        <th>Customer Country</th>
                        <th>Customer City</th>
                        <th>Employee Id</th>
                        <th>Employee First Name</th>
                        <th>Employee Last Name</th>
                        <th>Employee Country</th>
                        <th>Employee City</th>
                        <th>Month</th>
                        <th>Year</th>

                    </tr>

                     @forelse ($records as $k=> $record)
                        <tr>
                         
                          
                           <td>{{ $record['TD_customer']['customerID'] }}</td>
                           <td>{{ $record['TD_customer']['customerName'] }}</td>
                           <td>{{ $record['TD_customer']['country'] }}</td>
                           <td>{{ $record['TD_customer']['city'] }}</td>

                           <td>{{ $record['TD_employee']['employeeID'] }}</td>
                           <td>{{ $record['TD_employee']['firstname'] }}</td>
                           <td>{{ $record['TD_employee']['lastname'] }}</td>
                           <td>{{ $record['TD_employee']['country'] }}</td>
                           <td>{{ $record['TD_employee']['city'] }}</td>

                            <td>{{ $record['TD_time']['ordermonth'] }}</td>
                            <td>{{ $record['TD_time']['orderyear'] }}</td>
                         
                           
                            
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5">لاتوجد سجلات</td>
                        </tr>
                    @endforelse
                </table> 
            </div>

         <div class="box-footer clearfix">
               
            </div> 
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
        document.getElementById("employeeIDDiv").style.display = "none";
        document.getElementById("lastnameDiv").style.display = "none";
        document.getElementById("firstnameDiv").style.display = "none";
        document.getElementById("employee_countryDiv").style.display = "none";
        document.getElementById("employee_cityDiv").style.display = "none";
        document.getElementById("customerIDDiv").style.display = "none";
        document.getElementById("customerNameDiv").style.display = "none";
        document.getElementById("customer_countryDiv").style.display = "none";
        document.getElementById("customer_cityDiv").style.display = "none";
        document.getElementById("orderyearDiv").style.display = "none";
        document.getElementById("ordermonthDiv").style.display = "none";


    $("#RemployeeID").click(function() {
        document.getElementById("employeeIDDiv").style.display = "block";
        document.getElementById("lastnameDiv").style.display = "none";
        document.getElementById("firstnameDiv").style.display = "none";
        document.getElementById("employee_countryDiv").style.display = "none";
        document.getElementById("employee_cityDiv").style.display = "none";        
    });
    $("#Rlastname").click(function() {
        document.getElementById("employeeIDDiv").style.display = "none";
        document.getElementById("lastnameDiv").style.display = "block";
        document.getElementById("firstnameDiv").style.display = "none";
        document.getElementById("employee_countryDiv").style.display = "none";
        document.getElementById("employee_cityDiv").style.display = "none";
    });
    $("#Rfirstname").click(function() {
        document.getElementById("employeeIDDiv").style.display = "none";
        document.getElementById("lastnameDiv").style.display = "none";
        document.getElementById("firstnameDiv").style.display = "block";
        document.getElementById("employee_countryDiv").style.display = "none";
        document.getElementById("employee_cityDiv").style.display = "none";
    });
    $("#Remployee_country").click(function() {
        document.getElementById("employeeIDDiv").style.display = "none";
        document.getElementById("lastnameDiv").style.display = "none";
        document.getElementById("firstnameDiv").style.display = "none";
        document.getElementById("employee_countryDiv").style.display = "block";
        document.getElementById("employee_cityDiv").style.display = "none";
    });
    $("#Remployee_city").click(function() {
        document.getElementById("employeeIDDiv").style.display = "none";
        document.getElementById("lastnameDiv").style.display = "none";
        document.getElementById("firstnameDiv").style.display = "none";
        document.getElementById("employee_countryDiv").style.display = "none";
        document.getElementById("employee_cityDiv").style.display = "block";
    });
    
    $("#RcustomerID").click(function() {
        document.getElementById("customerIDDiv").style.display = "block";
        document.getElementById("customerNameDiv").style.display = "none";
        document.getElementById("customer_countryDiv").style.display = "none";
        document.getElementById("customer_cityDiv").style.display = "none";
    });
    $("#RcustomerName").click(function() {
        document.getElementById("customerIDDiv").style.display = "none";
        document.getElementById("customerNameDiv").style.display = "block";
        document.getElementById("customer_countryDiv").style.display = "none";
        document.getElementById("customer_cityDiv").style.display = "none";
    });
    $("#Rcustomer_country").click(function() {
        document.getElementById("customerIDDiv").style.display = "none";
        document.getElementById("customerNameDiv").style.display = "none";
        document.getElementById("customer_countryDiv").style.display = "block";
        document.getElementById("customer_cityDiv").style.display = "none";
    });
    $("#Rcustomer_city").click(function() {
        document.getElementById("customerIDDiv").style.display = "none";
        document.getElementById("customerNameDiv").style.display = "none";
        document.getElementById("customer_countryDiv").style.display = "none";
        document.getElementById("customer_cityDiv").style.display = "block";
    });
   
   
    $("#year").click(function() {
        document.getElementById("orderyearDiv").style.display = "block";
        document.getElementById("ordermonthDiv").style.display = "none";   
    });
    $("#month").click(function() {
        document.getElementById("orderyearDiv").style.display = "none";
        document.getElementById("ordermonthDiv").style.display = "block";

    });
});

    </script>
@endsection
