@extends('backend.dashboard.layout.master')
@section('content')

<div class="container-xxl">
    @if ($errors->any())
        <div class="alert alert-danger mt-4">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Modal (should be outside the card for Metronic) -->
    <div class="modal fade" id="simpleFormModal" tabindex="-1" aria-labelledby="simpleFormModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 rounded-4 shadow">
                <div class="modal-header rounded-top-4" style="background: linear-gradient(90deg, #f8fafc 0%, #e2e8f0 100%); border-bottom: 1px solid #e5e7eb;">
                    <h5 class="modal-title fw-bold text-dark" id="simpleFormModalLabel">
                        <i class="bi bi-person-lines-fill me-2 text-secondary"></i>{{ translate('User Details') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ translate('Close') }}"></button>
                </div>
                <div class="modal-body bg-white">
                    <form method="POST" action="{{ route('userCustomerStore.post') }}" enctype="multipart/form-data">
                        @csrf
                        @method('POST')
                        <div class="row g-4">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold required">{{ translate('Full name') }}</label>
                                <input type="text" class="form-control" name="name" value="{{ old('name', $User->name ?? '') }}" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold required">{{ translate('email') }}</label>
                                <input type="email" class="form-control rounded-3" name="email" value="{{ old('email', $User->email ?? '') }}" required>
                            </div>
<div class="col-md-4">
    <!--begin::Main wrapper-->
    <div class="fv-row" data-kt-password-meter="true">
        <!--begin::Label-->
        <label class="form-label fw-semibold fs-6 mb-2 required">
            {{ translate('password') }}
        </label>
        <!--end::Label-->

        <!--begin::Input and Button wrapper-->
        <div class="d-flex align-items-center mb-3 position-relative">
            <input class="form-control form-control-lg form-control-solid" style="padding-right: 2.5rem;"
                type="password" placeholder="" id="PasswordField" name="password" autocomplete="off" />

            <!--begin::Visibility toggle-->
            <span class="btn btn-sm btn-icon position-absolute top-50 translate-middle-y" style="right: 70px; z-index:2;"
                data-kt-password-meter-control="visibility">
                <i class="ki-duotone ki-eye-slash fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                <i class="ki-duotone ki-eye d-none fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
            </span>
            <!--end::Visibility toggle-->

            <button type="button" onclick="Generate()" class="btn btn-sm btn-primary ms-2" id="generatePasswordBtn" style="min-width: 70px;">
                Generate
            </button>
        </div>
        <!--end::Input and Button wrapper-->
    </div>
    <!--end::Main wrapper-->
</div>


                            <div class="col-md-4">
                                <label class="form-label fw-semibold required">{{ translate('phone number') }}</label>
                                <input type="text" class="form-control " name="phone" value="{{ old('phone', $User->phone ?? '') }}" required>
                                <div class="invalid-feedback small">{{ translate('Please provide a valid name.') }}</div>
                            </div>

                        </div>
                        <div class="modal-footer bg-white rounded-bottom-4 border-0">
                            <button type="button" class="btn btn-light " data-bs-dismiss="modal">
                                {{ translate('Close') }}
                            </button>
                            <input type="submit" class="btn btn-primary" value="{{ translate('Submit') }}">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- End Modal -->

    <div class="mb-5"></div>

    <div class="card mb-5">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h3 class="card-title mb-0">
                @if (isset($method) && $method == 'PUT')
                    {{ translate('Edit Customer') }}
                @else
                    {{ translate('Create Customer') }}
                @endif
            </h3>
            <div>
                @if (!isset($method))
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#simpleFormModal">
                        <i class="bi bi-person-lines-fill me-2 text-white"></i>{{ translate('Add User') }}
                    </button>
                @endif
            </div>
        </div>

        <div class="card-body">
            <form class="needs-validation" id="myForm" action="{{ $action }}" method="POST" enctype="multipart/form-data" novalidate>
                {{ csrf_field() }}
                @if (isset($method))
                    @method('PUT')
                @endif

                <div class="row g-3 mt-3">
                    <div class="col-md-4">
                        <label class="form-label required">{{ translate('Select User') }}</label>
                        <select class="form-control" name="user_id" id="">
                            @foreach ($User::get() as $item)
                                <option value="{{ $item->id }}"
                                    @if (old('user_id', isset($Customer) ? $Customer->user_id : null) == $item->id) selected @endif>
                                    {{ $item->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">{{ translate('Gender') }}</label>
                        <select id="adminroles" class="form-select" name="gender">
                            <option value="Male" {{ old('gender', isset($Customer) ? $Customer->gender : '') == 'Male' ? 'selected' : '' }}>{{ translate('Male') }}</option>
                            <option value="Female" {{ old('gender', isset($Customer) ? $Customer->gender : '') == 'Female' ? 'selected' : '' }}>{{ translate('Female') }}</option>
                        </select>
                        <div class="invalid-feedback">{{ translate('Please enter a valid gender') }}</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">{{ translate('Passport') }}</label>
                        <input type="text" class="form-control" name="passport" value="{{ old('passport', $Customer->passport) }}" placeholder="Enter Passport if exists" required>
                        <div class="invalid-feedback">{{ translate('Passwords do not match.') }}</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">{{ translate('Birthday') }}</label>
                        <input class="form-control form-control-inline input-medium date-picker" value="{{ old('birthday', $Customer->birthday) }}" name="birthday" size="16" type="date">
                        <div class="invalid-feedback">{{ translate('Please select a valid BirthDay.') }}</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label"> {{translate('Language')}}</label>
                        <select name="lang" class="form-select" id="">
                            @foreach ($language as $item )
                                <option value="{{ $item->name }}" {{ old('lang', isset($Customer) ? $Customer->lang : '') == $item->name ? 'selected' : '' }}>
                                    {{ $item->name }}
                                </option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">{{ translate('Please select a valid Language.') }}</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">{{ translate('Nationally') }}</label>
                        <input type="text" class="form-control" value="{{ old('nationally', $Customer->nationally) }}"  name="nationally" placeholder="Enter User's nationally " required>
                        <div class="invalid-feedback">{{ translate('Please select a valid Nationally.') }}</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label required">{{ translate('Add Address') }}</label>
                        <input type="text" class="form-control" value="{{ old('address', $Customer->address) }}"  name="address" placeholder="Enter User's address" required>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label required">{{ translate('Select Currency') }}</label>
                        <select class="form-control" name="currency" id="">
                            @foreach ($currency as $item )
                                <option value="{{$item->symbol}}">{{ $item->symbol }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row g-3 mt-3">
                    <div class="col-md-4">
                        <div class="image-input image-input-outline" data-kt-image-input="true" style="background-image: url('{{ asset('assets/media/avatars/blank.png') }}')">
                            <div class="image-input-wrapper w-80px h-80px" style="background-image: url('{{ isset($Customer) && $Customer->image ? asset($Customer->image) : asset('assets/media/avatars/blank.png') }}')"></div>
                            <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                data-kt-image-input-action="change"
                                data-bs-toggle="tooltip"
                                title="{{ translate('Change image') }}">
                                <i class="bi bi-pencil-fill fs-7"></i>
                                <input type="file" name="image" accept=".png, .jpg, .jpeg"/>
                                <input type="hidden" name="image_remove"/>
                            </label>
                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                data-kt-image-input-action="cancel"
                                data-bs-toggle="tooltip"
                                title="{{ translate('Cancel image') }}">
                                <i class="bi bi-x fs-2"></i>
                            </span>
                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                data-kt-image-input-action="remove"
                                data-bs-toggle="tooltip"
                                title="{{ translate('Remove image') }}">
                                <i class="bi bi-x fs-2"></i>
                            </span>
                        </div>
                        <div class="form-text">{{ translate('Allowed file types: png, jpg, jpeg.') }}</div>
                    </div>
                </div>
                <div class="d-flex justify-content-end mt-4">
                    <button class="btn btn-primary" type="submit">{{ translate('Submit Form') }}</button>
                    <a class="btn ms-5" style="background-color:aliceblue;" href="{{ route('Customer.index') }}" type="submit">{{ translate('Back') }}</a>
                </div>
            </form>
        </div>
    </div>
    <div class="mb-5"></div>
</div>

<script>
    function Generate() {
        var length = 8,
            charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+",
            retVal = "";
        for (var i = 0, n = charset.length; i < length; ++i) {
            retVal += charset.charAt(Math.floor(Math.random() * n));
        }
        document.getElementById("PasswordField").value = retVal;
    }
</script>
@endsection