@php
    $routeLink = $blade_data['routesLink'] ?? 'admin.memberships';
@endphp
@extends('admin.layouts.app')
@section('page-title', $blade_data['title'])

@section('breadcrumb')
    <x-breadcrumb :blades="$blade_data" />
@endsection


@section('content')

    <div class=" ">
        <div class="card rounded-0 mb-2">
            <div class="card-body">
                <form
                    action="{{ $form_data->id ? route($routeLink . '.update', ['id' => $form_data->id]) : route($routeLink . '.store') }}"
                    method="POST" class="edit-form" enctype="multipart/form-data">
                    @csrf

                    <div class="form-group row">

                        <div class="col-sm-4 mb-3">
                            <label class="">First Name</label>
                            <div class="">
                                <input type="text" name="first_name"
                                    value="{{ old('first_name', $form_data->first_name) }}"
                                    class="form-control @error('first_name') is-invalid @enderror" required>
                                @error('first_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-sm-4 mb-3">
                            <label class="">Last Name</label>
                            <div class="">
                                <input type="text" name="last_name" value="{{ old('last_name', $form_data->last_name) }}"
                                    class="form-control @error('last_name') is-invalid @enderror" required>
                                @error('last_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>


                        <div class="col-sm-4 mb-3">
                            <label class="">Email</label>
                            <div class="">
                                <input type="email" name="email" value="{{ old('email', $form_data->email) }}"
                                    class="form-control @error('email') is-invalid @enderror" required>
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>


                        <div class="col-sm-4 mb-3">
                            <label class="">Phone</label>
                            <div class="">
                                <input type="text" name="phone" value="{{ old('phone', $form_data->phone) }}"
                                    class="form-control @error('phone') is-invalid @enderror">
                                @error('phone')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-sm-4 mb-3">
                            <label class="">Phone 2</label>
                            <div class="">
                                <input type="text" name="phone_2" value="{{ old('phone_2', $form_data->phone_2) }}"
                                    class="form-control @error('phone_2') is-invalid @enderror">
                                @error('phone_2')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        @if (!isset($form_data->id))
                            <div class="col-sm-4 mb-3">
                                <label class="">Password</label>
                                <div class="">
                                    <input type="text" name="password" value=""
                                        class="form-control @error('password') is-invalid @enderror"
                                        {{ $form_data->id ? '' : 'required' }} />
                                    @error('password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        @endif

                        <div class="col-sm-4 mb-3">
                            <label class="">DOB</label>
                            <div class="">
                                <input type="date" name="dob" value="{{ old('dob', $form_data->dob) }}"
                                    class="form-control @error('dob') is-invalid @enderror">
                                @error('dob')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-sm-12 mb-3">
                            <label class="">Address</label>
                            <div class="">
                                <textarea name="address" class="form-control @error('address') is-invalid @enderror">{{ old('address', $form_data->address) }}</textarea>
                                @error('address')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>


                        <div class="col-md-4 mb-3">
                            <label class="">NIN Image</label>
                            <div>
                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                    <div class="fileinput-new img-thumbnail" style="width: 200px; height: 150px;">
                                        <img src="{{ $nin_image->image_path }}" alt="">
                                    </div>
                                    <div class="fileinput-preview fileinput-exists img-thumbnail"
                                        style="max-width: 200px; max-height: 150px;"></div>
                                    <div>
                                        <span class="btn btn-outline-secondary btn-file">

                                            <span class="fileinput-new">Select image</span>
                                            <span class="fileinput-exists">Change</span>
                                            <input type="file" name="nin_image"></span>
                                        <a href="#" class="btn btn-outline-secondary fileinput-exists"
                                            data-dismiss="fileinput">Remove</a>
                                    </div>
                                </div>
                            </div>
                            @error('image')
                                <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                            @enderror

                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="">BVN Image</label>
                            <div>
                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                    <div class="fileinput-new img-thumbnail" style="width: 200px; height: 150px;">
                                        <img src="{{ $bvn_image->image_path }}" alt="">
                                    </div>
                                    <div class="fileinput-preview fileinput-exists img-thumbnail"
                                        style="max-width: 200px; max-height: 150px;"></div>
                                    <div>
                                        <span class="btn btn-outline-secondary btn-file">

                                            <span class="fileinput-new">Select image</span>
                                            <span class="fileinput-exists">Change</span>
                                            <input type="file" name="bvn_image"></span>
                                        <a href="#" class="btn btn-outline-secondary fileinput-exists"
                                            data-dismiss="fileinput">Remove</a>
                                    </div>
                                </div>

                            </div>
                            @error('image')
                                <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                            @enderror

                        </div>
                    </div>


                    @for ($i = 0; $i <= 2; $i++)
                        <hr>
                        <div>
                            <h4>Guarantor {{ $i + 1 }}</h4>
                        </div>
                        <div class="row">
                            <input type="hidden" name="guarantor[{{ $i }}][id]"
                                value="{{ $guarantor_data[$i]['id'] ?? '' }}">
                            <div class="col-sm-6 mb-3">
                                <label class="">Name</label>
                                <div class="">
                                    <input type="text" name="guarantor[{{ $i }}][name]"
                                        value="{{ $guarantor_data[$i]['name'] ?? '' }}" class="form-control ">
                                </div>
                            </div>

                            <div class="col-sm-6 mb-3">
                                <label class="">Type</label>
                                <div class="">
                                    <input type="text" name="guarantor[{{ $i }}][type]"
                                        value="{{ $guarantor_data[$i]['type'] ?? '' }}" class="form-control ">
                                </div>
                            </div>

                            <div class="col-sm-6 mb-3">
                                <label class="">Email</label>
                                <div class="">
                                    <input type="email" name="guarantor[{{ $i }}][email]"
                                        value="{{ $guarantor_data[$i]['email'] ?? '' }}" class="form-control ">
                                </div>
                            </div>

                            <div class="col-sm-6 mb-3">
                                <label class="">Phone</label>
                                <div class="">
                                    <input type="text" name="guarantor[{{ $i }}][phone]"
                                        value="{{ $guarantor_data[$i]['phone'] ?? '' }}" class="form-control ">
                                </div>
                            </div>


                            <div class="col-sm-12 mb-3">
                                <label class="">Comment</label>
                                <div class="">
                                    <textarea name="guarantor[{{ $i }}][comments]" value="" class="form-control ">{{ $guarantor_data[$i]['comments'] ?? '' }}</textarea>
                                </div>
                            </div>


                        </div>
                    @endfor


                    <div class="row">
                        @foreach ($department_data as $item)
                            <div class="col-md-3">
                                <input type="checkbox" name="departments[]" value="{{ $item->id }}" {{in_array($item->id,$selected_department)?'checked':''}}>
                                {{ $item->name }}
                            </div>
                        @endforeach
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-sm btn-primary submitBtn">Save</button>
                            <a href="{{ route($routeLink . '.index') }}" class="btn btn-sm btn-secondary"
                                wire:navigate>Back</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection



@section('javascript')

    {{-- <script src="{{ asset('plugins/jasny-bootstrap/js/jasny-bootstrap.min.js') }}"></script>
    <link href="{{ asset('plugins/jasny-bootstrap/css/jasny-bootstrap.min.css') }}" rel="stylesheet" /> --}}
    <script>
        $(".edit-form").validate({
            highlight: function(element) {
                $(element).closest('.form-control').removeClass('is-valid').addClass(
                    'is-invalid'); // add the Bootstrap error class to the control group
            },
            ignore: ":hidden, [contenteditable='true']",
            unhighlight: function(element) {
                $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
            },
            success: function(element) {
                $(element).closest('.form-control').removeClass('is-invalid').addClass(
                    'is-valid'); // remove the Boostrap error class from the control group
            },
            submitHandler: function(form) {
                var loadingText = '<i class="fa fa-circle-notch fa-spin"></i> Saving..';
                $('.edit-form  .submitBtn').html(loadingText).prop('disabled', true);
                return true;
            }
        });
    </script>
@endsection
{{--
    //it not working on livewire-navigate
    @push('scripts')
@endpush --}}