@extends('layouts.app')

@section('content')
<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('/css/jquery.timepicker.min.css') }}">
<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h3>Create New Campaign</h3>
        </div>
        <div class="pull-right">
            <button class="btn btn-primary btn-sm" onclick="window.history.back();">Back</button>
        </div>
    </div>
</div>

<form id="createAd" class="form-horizontal addBorderClass" role="form" enctype="multipart/form-data" method="POST" action="{{ route('admanagements.store') }}">
    <div class="row">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-3">Name :</label>
                <input class="col-md-4" id="ad_name" type="text" name="name" />
                <div class="col-md-2"></div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-3">Image :</label>
                <input class="col-md-4" id="ad_image" type="file" name="image" />
                <div class="col-md-2"></div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-3">Link :</label>
                <input class="col-md-4" id="ad_link" type="text" name="link" />
                <div class="col-md-2"></div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-3">Weight :</label>
                <input class="col-md-4" id="ad_weigth" type="text" name="weight" />
                <div class="col-md-2"></div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-3">Geo Location :</label>
                <select class="col-md-4" name="geo_group_id">
                    <option value="">Select Geo Group</option>
                    @foreach($geoGroup as $group) 
                        <option value="{{ $group->id }}">{{ $group->name }}</option>
                    @endforeach
                </select>
                <div class="col-md-2"></div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label for="title" class="col-sm-3 controllabel">Country:</label>
                <select name="country" class="col-md-4" id="country">
                    <option value=''>Select Country</option>
                                    </select>
                <div class="col-md-2"></div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12 state-div">
            <div class="form-group">
                <label for="name" class="col-sm-3 controllabel">State:</label>
                <select name="state" class="col-md-4" id="state">
                    <option value=''>Select State</option>
                </select>
                <div class="col-md-2"></div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12 city-div">
            <div class="form-group">
                <label for="image" class="col-sm-3 controllabel">City:</label>
                <select name="city" class="col-md-4" id="city" multiple="true">
                    <option value=''>Select City</option>
                </select>
                <div class="col-md-2"></div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12 text-left">
            <button type="submit" class="btn btn-primary btn-sm">Submit</button>
        </div>
    </div>
</form>

<script>
    $(document).on('change', '#country', function(e){ 
        var id = $(this).val();
        var type = 'state';
        
        $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type: "POST",
            url: '/admanagements/get_city_state_data',
            data: {'id': id, 'type': type},
            success: function (result)
            { 
                $('.state-div').html(result);
            }
        });
    });

    $(document).on('change', '#state', function(e){
        var id = $(this).val();
        var type = 'city';

        $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type: "POST",
            url: '/admanagements/get_city_state_data',
            data: {'id': id, 'type': type},
            success: function (result)
            {
                $('.city-div').html(result);
            }
        });
    });
</script>
@endsection