@extends('layouts.admin')
@section('title','Add Merchant')
@section('styles')
    <style type="text/css">
        textarea {
          resize: none;
        }
    </style>
@endsection

@section('content')

    <div class="page-wrapper">
        <div class="page-breadcrumb">
            <div class="row">
                <div class="col-5 align-self-center">
                    <h4 class="page-title">Add Merchant</h4>
                </div>
                <div class="col-7 align-self-center">
                    <div class="d-flex align-items-center justify-content-end">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('dashboard') }}">Home</a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="{{ route('merchants') }}">Merchants</a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">Add Merchant</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <form method="POST" action="{{ route('merchants.add') }}" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                   <div class="col-lg-3 col-12">
                                        <label>PHOTO</label>
                                        <input type="file" id="input-file-now-custom-2" name="image" value="{{ old('image')}}" class="dropify" data-height="300" data-allowed-file-extensions="jpeg png jpg"/>
                                        @error('image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <p class="mt-2 text-center">Image must be square and at least 500x500 pixels</p>
                                    </div>
                                    <div class="col-lg-9 col-12">
                                        <h4 class="card-title mb-4">Merchant Information</h4>
                                        <div class="row">
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Merchant Name*</label>
                                                <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" placeholder="Enter merchant name" required>
                                                @error('name')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Industry Type*</label>
                                                <select class="form-control @error('merchant_type_id') is-invalid @enderror" name="merchant_type_id"required>
                                                    <option value="" disabled selected> Select Merchant Type</option>
                                                    @foreach($merchant_types as $type)
                                                        <option value="{{ $type->id }}" {{ old('merchant_type_id') == $type->id ? 'selected' : ''}} >
                                                            {{ $type->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('merchant_type_id')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <!--<div class="col-lg-6 col-12 form-group">
                                                <label>Website</label>
                                                <input type="text" class="form-control @error('website') is-invalid @enderror" name="website" value="{{ old('website') }}" placeholder="Enter website" required>
                                                @error('website')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>-->
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Website</label>
                                                <input type="text" class="form-control" name="website"placeholder="Enter website" required>
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Email Address*</label>
                                                <input type="text" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" placeholder="Enter email address" required>
                                                @error('email')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Contact Person*</label>
                                                <input type="text" class="form-control @error('contact_person') is-invalid @enderror" name="contact_person" value="{{ old('contact_person') }}" placeholder="Enter contact person" required>
                                                @error('contact_person')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Contact No.*</label>
                                                <input type="text" class="form-control @error('contact_number') is-invalid @enderror" name="contact_number" value="{{ old('contact_number') }}" placeholder="Enter contact number" maxlength="13" required>
                                                @error('contact_number')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Address*</label>
                                                <textarea class="form-control @error('address') is-invalid @enderror" rows="4" name="address" id="address" placeholder="Enter address" required>{{ old('address') }}</textarea>
                                                @error('address')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Area code*</label>
                                                <select class="form-control @error('merchant_area_code_id') is-invalid @enderror" name="merchant_area_code_id" required>
                                                    <option value="" disabled selected> Select Area Code</option>
                                                    @foreach($area_codes as $area)
                                                        <option value="{{ $area->id }}" {{ old('merchant_area_code_id') == $area->id ? 'selected' : ''}} >
                                                            {{ $area->area_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('merchant_area_code_id')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Date of Start*</label>
                                                <input type="text" class="form-control @error('date_start') is-invalid @enderror" name="date_start" id="date_start" value="{{ old('date_start') }}" placeholder="mm/dd/yyyy" required>
                                                @error('date_start')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>End of Contract*</label>
                                                 <input type="text" class="form-control @error('date_end') is-invalid @enderror" name="date_end" id="date_end" value="{{ old('date_end') }}" placeholder="mm/dd/yyyy" required>
                                                @error('date_end')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-12 d-none form-group">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" name="is_mobile" id="is_mobile" value="1" {{ old('is_mobile') == '1' ? 'checked' : '' }}>
                                                    <label class="custom-control-label" for="is_mobile">Mobile App</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row d-none" id="agreement">
                                            <div class="col-12">
                                                <h4 class="card-title mb-4 mt-2">Account & Agreement</h4>
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Establishment*</label>
                                                <select class="form-control @error('establishment_id') is-invalid @enderror" name="establishment_id" id="establishment_id" required>
                                                    <option value="" disabled selected> Select Establishment</option>
                                                    @foreach($establishments as $establishment)
                                                        <option value="{{ $establishment->id }}" data-image="{{ isset($establishment->path) ? config('app.AWS_BUCKET_URL').$establishment->path : ''}}" {{ old('establishment_id') == $establishment->id ? 'selected' : ''}} >
                                                            {{ ucwords($establishment->name) }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('establishment_id')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Payment Method*</label>
                                                <select class="form-control multiple" name="payment_method[]" id="payment_method" multiple="multiple" required>
                                                    @if (is_array(old('payment_method')))
                                                        <option value="cash" {{ in_array('cash', old('payment_method')) ? 'selected' : '' }}>Cash</option>
                                                        <option value="hmo" {{ in_array('hmo', old('payment_method')) ? 'selected' : '' }}>HMO</option>
                                                        <option value="points" {{ in_array('points', old('payment_method')) ? 'selected' : '' }}>POINTS</option>
                                                        <option value="bank-to-bank" {{ in_array('bank-to-bank', old('payment_method')) ? 'selected' : '' }}>BANK-TO-BANK</option>
                                                    @else
                                                        <option value="cash">Cash</option>
                                                        <option value="hmo">HMO</option>
                                                        <option value="points">POINTS</option>
                                                        <option value="bank-to-bank">BANK-TO-BANK</option>
                                                    @endif
                                                </select>
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Application*</label>
                                                <select class="form-control" name="application_type" required>
                                                    <option value="" disabled selected> Select Application</option>
                                                    <option value="getta" {{ old('application_type') == 'getta' ? 'selected' : ''}}>Getta</option>
                                                    <option value="kol-a" {{ old('application_type') == 'kol-a' ? 'selected' : ''}}>Kol-A</option>
                                                </select>
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Account Type*</label>
                                                <select class="form-control" name="account_type" required>
                                                    <option value="" disabled selected> Select Account Type</option>
                                                    <option value="group" {{ old('account_type') == 'group' ? 'selected' : ''}}>Group</option>
                                                    <option value="individual" {{ old('account_type') == 'individual' ? 'selected' : ''}}>Individual</option>
                                                </select>
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Service Fee(%)*</label>
                                                <select class="form-control" name="service_fee" required>
                                                    @for ($i = 0; $i < 101; $i++)
                                                        The current value is {{ $i }}
                                                        <option value="{{ $i }}" {{ old('service_fee') == $i ? 'selected' : ''}}>{{ $i.'%' }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                            <div class="col-lg-6 col-12 form-group">
                                                <label>Other Fee(%)*</label>
                                                <select class="form-control" name="other_fee" required>
                                                    @for ($i = 0; $i < 101; $i++)
                                                        The current value is {{ $i }}
                                                        <option value="{{ $i }}" {{ old('other_fee') == $i ? 'selected' : ''}}>{{ $i.'%' }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 form-group text-right">
                                                <a href="{{ route('merchants') }}">
                                                    <button type="button" class="btn btn-danger">
                                                        <i class="mdi mdi-close-circle"></i> Cancel
                                                    </button>
                                                </a>
                                                <button type="submit" class="btn btn-info">
                                                    <i class="fa fa-save"></i> Save
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @include('dashboard.partials.footer')
        
    </div>
    
@endsection

@push('scripts')
    <script type="text/javascript">
        
       // All select option
        $('select').select2({
            width : '100%'
        });

        $('#establishment_id').select2({
            templateResult: formatState,
            templateSelection: formatState,
            width : '100%'
        });

        function formatState(opt) {
            if (!opt.id) {
                return opt.text;
            } 
            var optimage = $(opt.element).attr('data-image'); 
            if(!optimage){
               return opt.text;
            } else {                    
                return $('<span><img src="' + optimage + '" class="rounded-circle mr-1" width="30px" height="30px" /> ' + opt.text + '</span>');
            }
        };

        // Date start
        $('#date_start').datepicker({
            autoclose: true,
            todayHighlight: true
        });

        // Date End
        $('#date_end').datepicker({
            autoclose: true,
            todayHighlight: true
        });

        function initialize() {
            var complete_address = document.getElementById('address');
            var autocomplete = new google.maps.places.Autocomplete(complete_address);
        }
        google.maps.event.addDomListener(window, 'load', initialize); 

        
        isMobileAppChecked();

        $('#is_mobile').click( function(){
            isMobileAppChecked();
        });

        // is mobile app checked
        function isMobileAppChecked() {
            if ($('#is_mobile').is(":checked")){
                $('#agreement').removeClass('d-none');
                $('#agreement :input').removeAttr('disabled', true);
                $('#agreement select').removeAttr('disabled', true);
            } else {
                $('#agreement').addClass('d-none');
                $('#agreement :input').attr('disabled', true);
                $('#agreement select').attr('disabled', true);
            }
        }

   </script>
@endpush