@extends('../../master_layout/admin_master')

@section('title')
<title>{{config('constants.APP_NAME')}} Side Drawer Websites</title>
@endsection

@section('content')
<div class="content-wrapper">
    <!-- Content Header (Partner header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Side Drawer Websites
                        @if(isset($country_info) && !empty($country_info))
                         - {{$country_info->country_name}}
                        @endif
                    </h1>
                </div><!-- /.col -->

                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                                                <li class="breadcrumb-item"><a href="{{ route('admin.country.list')}}" target="">Countries</a></li>
                        <li class="breadcrumb-item active"> Add Websites</li>
                    </ol>
                </div>

                <!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content-header -->

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    @if(session('message'))
                    <div class="alert alert-{{session('message.type')}} alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        @if(session('message.type')=='danger')
                        <p class="mb-0"><strong>Sorry!</strong> {!! session('message.text') !!}</p>
                        @else
                        <p class="mb-0"><strong>Success!</strong> {!! session('message.text') !!}</p>
                        @endif
                    </div>
                    @endif
                    <!--  -->
                    <div class="card card-primary">                        
                        <!-- form start -->
                        <form id="addWebsite" method="post" action="{{ route('admin.sidedrawer.save')}}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="country_id" id="" value="{{$country_id}}">
                            <div class="card-body">
                                @php
                                $x_embed_field = 0;
                                @endphp
                                <div class="row mt-2">
                                    <div class="col-md-6">
                                        <div class="form-group field_wrapper">
                                            <label for="site_title">Websites (To display on side drawer for single country website)</label>     
                                            
                                            @if(isset($websites) && !empty($websites))
                                                @foreach($websites as $website)
                                                @php $x_embed_field++; @endphp
                                                <div class="form-inline mb-2">
                                                    <input type="text" name="website[]" class="form-control w-50" id="website" placeholder="https://www.domain.com" value="{{$website->website}}">
                                                        @if($x_embed_field > 1)
                                                        <a href="javascript:void(0);" class="remove_button ml-2"><img src="{{asset('public/backend_assets/dist/img/remove-icon.png')}}"/></a>
                                                        @else
                                                        <a href="javascript:void(0);" class="add_button ml-2" title="Add field"><img src="{{asset('public/backend_assets/dist/img/add-icon.png')}}"/></a>
                                                        @endif
                                                </div>
                                                @endforeach
                                            @else
                                                @php $x_embed_field++; @endphp
                                                <div class="form-inline mb-2">
                                                    <input type="text" name="website[]" class="form-control w-50" id="website" placeholder="https://www.domain.com" value="">
                                                    <a href="javascript:void(0);" class="add_button ml-2" title="Add field"><img src="{{asset('public/backend_assets/dist/img/add-icon.png')}}"/></a>
                                                </div>
                                            @endif
                                        </div>
                                        
                                    </div>
                                </div>                         
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">Submit</button>
                                <a href="{{ route('admin.country.list')}}" class="btn btn-dark float-right">Back</a>
                            </div>
                        </form>
                    </div>
                    <!-- /.card -->
                </div>
                <!--/.col (left) -->

            </div>
            <!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>
</div>
@endsection

@section('custom_js')
<script>
$(document).ready(function(){
    var maxField = 5; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div class="form-inline mb-2"><input type="text" name="website[]" class="form-control w-50" id="website" placeholder="https://www.domain.com" value=""><a href="javascript:void(0);" class="remove_button ml-2"><img src="{{asset('public/backend_assets/dist/img/remove-icon.png')}}"/></a></div>'; //New input field html 
    var x = '{{$x_embed_field}}'; //Initial field counter is 1
    
    // Once add button is clicked
    $(addButton).click(function(){
        //Check maximum number of input fields
        if(x < maxField){ 
            x++; //Increase field counter
            $(wrapper).append(fieldHTML); //Add field html
        }else{
            alert('A maximum of '+maxField+' fields are allowed to be added. ');
        }
    });
    
    // Once remove button is clicked
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrease field counter
    });
});
</script>
@endsection