@extends('admin.layouts.admin')
@section('content')
<!-- Page Content-->
<div class="page-content-tab">
    <div class="container-fluid">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">  
                    <div class="float-right">
						<ol class="breadcrumb">
							<li class="breadcrumb-item">
								<a href="javascript:void(0);">Setting</a>
							</li>
							<li class="breadcrumb-item">
								<a href="/admin/team">Team</a>
							</li>
							<li class="breadcrumb-item active">Create Area Team</li>
						</ol>
					</div>
                    <h4 class="page-title">Create Area Team</h4>
                </div>
                <!--end page-title-box-->
            </div>
            <!--end col-->
        </div>
        <!--end row-->
        <!-- end page title end breadcrumb -->
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <form method="POST" action="{{ url('admin/team/store') }}" class="row g-3 needs-validation" novalidate>
                        @csrf
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="zone_id" class="mb-2 text-bold-600 text-uppercase">Zone Name<span class="text-danger">*</span> </label>
                                    <select class="form-control required select2" name="zone_id" aria-required="true" id="zone_id"  required>
                                        <option>Select Zone</option>    
                                        @foreach($zones as $zone)
                                        <option value="{{$zone->id ?? '' }}">{{$zone->name ?? '' }}</option>
                                        @endforeach
                                    </select>                                    
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="area_id" class="mb-2 text-bold-600 text-uppercase">Area Name<span class="text-danger">*</span> </label>
                                    <select class="form-control" name="area_id" id="area_id" required>
                                        
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="team_size" class="mb-2 text-bold-600 text-uppercase">Team Size<span class="text-danger">*</span> </label>
                                    <input type="text" class="form-control" name="team_size" aria-required="true" id="team_size"  required>
                                </div>
                            </div>


                            <div class="col-12">
                                <button class="btn btn-primary" type="submit">New Area Team</button>
                            </div>
                        </form>

                    </div><!--end card-body-->
                </div><!--end card-->
            </div><!--end col-->
        </div><!--end row-->
    </div>
    <!-- container -->
    <footer class="footer text-center text-sm-left">
        &copy; 2022 SSL Wireless <span class="text-muted d-none d-sm-inline-block float-right">Design and Developed by <a href="#">SSL Wireless</a></span>
    </footer>
    <!--end footer-->
</div>
<!-- end page content -->
@endsection

@section('script')

<script>
$(function () {   
    $('#zone_id').on('change', function () {
        var selectVal = $("#zone_id option:selected").val();
        
        $('#area_id').empty();
        $.ajax({
            type: "post",
            url: "{{ route('team.getAreaByZone') }}",
            data: {
                "_token": "{{ csrf_token() }}",
                id: selectVal
                },
            success: function(result) {
                var obj = $.parseJSON(result); 
                var toAppend='<option value="">Select Area</option>>'                        
                $.each(obj, function (key, value) {                       
                        toAppend+='<option value="'+value.id+'">'+ value.name +'</option>>'                 
                });   
                $("#area_id").append(toAppend)                                                   
            }
            
        })

    });
});
</script>
@endsection