@extends('layouts.master_admin')

@section('title')
    Add Channel Partner
@endsection

@section('partners')
    active
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <a class="btn btn-primary px-4 py-2 mb-3 float-right" href="/admin/channel-partners">
                <i class="fa fa-arrow-alt-circle-left mr-1"></i> Back
            </a>
        </div>
        <div class="col-md-12">
            <div class="block">
                <div class="block-content block-content-full">
                    <form class="js-validation-add-partner" method="POST" action="{{ route('admin.partner.create') }}">
                        @csrf
                        <div class="row items-push">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="name">Name</label>
                                    <input type="text" class="form-control form-control-lg form-control-alt" id="name" name="name" value="{{ old('name') }}">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="email">Email Address</label>
                                    <input type="email" class="form-control form-control-lg form-control-alt" id="email" name="email" value="{{ old('email') }}" >
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="organization">Organization</label>
                                    <input type="text" class="form-control form-control-lg form-control-alt" id="organization" name="organization" value="{{ old('organization') }}">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="country">Country</label>
                                    <select name="country" id="country" class="form-control form-control-lg form-control-alt" onchange="getCity();">
                                        <option value="-1">Select Country...</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->id}}" @if(old('country') == $country->id) {{ 'selected' }} @endif>{{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12" id="city-section">
                                <div class="form-group">
                                    <label for="city">City</label>
                                    <div class="text-center" id="city-loader" style="display: none;"><i class="fa fa-spinner fa-spin"></i></div>
                                    <select name="city" id="city" class="form-control form-control-lg form-control-alt">
                                        <option value="-1">Select City...</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="country_code">Country Code</label>
                                    <select name="country_code" id="country_code" class="form-control form-control-lg form-control-alt">
                                        <option value="">Select Country Code...</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->phone_code }}" @if(old('country_code') == $country->phone_code) {{ 'selected' }} @endif>{{ $country->name }} ({{ $country->phone_code }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="mobile_phone">Mobile Number</label>
                                    <input type="text" class="form-control form-control-lg form-control-alt" id="mobile_phone" name="mobile_phone" value="{{ old('mobile_phone') }}">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <button type="submit" class="btn btn-primary">Add</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ asset('assets/js/pages/be_forms_partner.min.js') }}"></script>
    <script>
        getCity();
        function getCity(){
            var countryId = $('#country').val();
            if(countryId > 0) {
                $.ajax({
                    url: '/city/' + countryId,
                    type:"GET",
                    dataType:"json",
                    beforeSend: function(){
                        $('#city-section').css('display', 'block');
                        $('#city-loader').show();
                        $('select[name="city"]').hide();
                    },
                    success:function(data) {
                        if(data.status == "success") {
                            if(data.data != ""){
                                $('select[name="city"]').empty();
                                $('select[name="city"]').append('<option value="-1">Select City...</option>');
                                $.each(data.data, function(key, value){
                                    $('select[name="city"]').append('<option value="'+ value.id +'">' + value.name + '</option>');
                                });
                                @if(old('city') != '')
                                    $('select[name="city"]').val('{{ old('city') }}');
                                @endif
                            } else{
                                $('#city-section').css('display', 'none');
                            }
                        }else {
                            alert('failed to retrieve city for selected country');
                        }
                    },
                    complete:function(){
                        $('#city-loader').hide();
                        $('select[name="city"]').show();
                    }
                });
            } else {
                $('select[name="city"]').empty().show();
                $('select[name="city"]').append('<option value="-1">Select City...</option>');
            }
        }
    </script>
@endsection