@extends('admin.layouts.app')

@section('content')
    <div class="main-content">
        <div id="contentDiv" class="">
            <div class="card">
                <div class="card-header">
                    <div class="title">Add Customer</div>
                    <div class="action-center">
                    </div>
                </div>
                <div class="card-body">
                    @if ($customer->exists)
                        <form method="POST" action="{{ route('admin.customer.update', $customer->id) }}" class="form" enctype="multipart/form-data">
                            @method('PUT')
                        @else
                            <form method="POST" action="{{ route('admin.customer.store') }}" class="form" enctype="multipart/form-data">
                    @endif
                    @csrf
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="mb-4">
                                <label for="" class="form-label">First Name<span class="required">*</span></label>
                                <input type="text" name="first_name" id="first_name"
                                    class="form-control @error('first_name') is-invalid @enderror"
                                    value="{{ old('first_name', $customer->first_name) }}" placeholder="Enter first name">
                                @error('first_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-4">
                                <label for="" class="form-label">Last Name</label>
                                <input type="text" name="last_name" id="last_name"
                                    class="form-control @error('last_name') is-invalid @enderror"
                                    value="{{ old('last_name', $customer->last_name) }}" placeholder="Enter last name">
                                @error('last_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-4">
                                <label for="" class="form-label">Email<span class="required">*</span></label>
                                <input type="email" name="email" id="email"
                                    class="form-control @error('email') is-invalid @enderror"
                                    value="{{ old('email', $customer->email) }}" placeholder="Enter email">
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-4">
                                <label for="" class="form-label">Mobile<span class="required">*</span></label>
                                <input type="text" name="mobile" id="mobile"
                                    class="form-control @error('mobile') is-invalid @enderror"
                                    value="{{ old('mobile', $customer->mobile) }}" placeholder="Enter mobile number">
                                @error('mobile')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-4">
                                <label for="username" class="form-label">Username<span class="required">*</span></label>
                                <input type="text" class="form-control @error('username') is-invalid @enderror"
                                    id="username" name="username" placeholder="Get your username"
                                    value="{{ old('username') }}">
                                @error('username')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-4">
                                <label for="dob" class="form-label">Date of Birth</label>
                                <input type="date" class="form-control @error('dob') is-invalid @enderror" id="dob"
                                    name="dob" placeholder="dob" value="{{ old('dob') }}">
                                @error('dob')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-4">
                                <label for="" class="form-label">Password<span class="required">*</span><span
                                        class="d-inline-block" id="pass_info" tabindex="0" data-bs-toggle="popover"
                                        data-bs-trigger="hover"
                                        data-bs-content="<div>
<strong><em>Password Requirements:</em></strong>
<ul>
<li>Must contain at least <strong>one uppercase letter</strong> (e.g., A, B, C).</li>
<li>Must include <strong>one lowercase letter</strong> (e.g., a, b, c).</li>
<li>Should have <strong>one digit</strong> (e.g., 1, 2, 3).</li>
<li>Requires <strong>one special character</strong> (e.g., @, $, %, &).</li>
<li>Must be <strong>at least 8 characters long</strong>.</li>
</ul>
</div>">
                                        <i data-feather="info"
                                            style="width: 16px;margin-left:6px;font-weight:600;margin-top:-2px"
                                            stroke-width="2.5"></i>
                                    </span></label>
                                <input type="password" name="password" id="password"
                                    class="form-control @error('password') is-invalid @enderror"
                                    value="{{ $customer->password }}" placeholder="Enter password"
                                    autocomplete="new-password">
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-4">
                                <label for="" class="form-label">Confirm Password<span
                                        class="required">*</span></label>
                                <input id="password-confirm" type="password"
                                    class="form-control @error('password_confirmation') is-invalid @enderror"
                                    name="password_confirmation" placeholder="Enter password again"
                                    autocomplete="new-password">
                                @error('password_confirmation')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <hr>
                        <div class="col-sm-6">
                            <div class="mb-4">
                                <label for="" class="form-label">Photo</label>
                                <input id="photo" type="file"
                                    class="form-control @error('photo') is-invalid @enderror" name="photo">
                                <small>Photo must be of 85mm * 109mm and not more than 2mb</small>
                                @error('photo')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mb-4">
                                <label for="" class="form-label">State</label>
                                <select id="state" class="form-select @error('state') is-invalid @enderror" name="state">
                                    @foreach ($states as $state)
                                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                                    @endforeach
                                </select>
                                @error('state')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="d-flex justify-content-center align-items-center">
                            <button class="btn btn-success me-2">{{ $customer->exists ? 'Update' : 'Create' }}</button>
                            <a href="{{ route('admin.customer.index') }}" class="btn btn-danger">Cancel</a>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
        <div id="interactionBar">
            <div class="inner-content">
                <div class="copyright-info">
                    <p>&#169; Copyright 2024 - Manarang. All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('inline-script')
    <script>
        document.getElementById('photo').addEventListener('change', function() {
            const file = this.files[0];
            // const errorMessage = document.getElementById('error-message');
            // errorMessage.textContent = '';

            if (file) {
                const validTypes = ['image/jpeg', 'image/jpg'];
                if (!validTypes.includes(file.type)) {
                    alert('File must be a JPEG image.');
                    this.value = '';
                    return;
                }

                const maxSizeInMB = 2;
                const maxSizeInBytes = maxSizeInMB * 1024 * 1024;

                if (file.size > maxSizeInBytes) {
                    alert('File size must not exceed 2 MB.');
                    this.value = '';
                    return;
                }

                const widthInMm = 85;
                const heightInMm = 109;
                const mmToPixels = 3.78;
                const widthInPixels = widthInMm * mmToPixels;
                const heightInPixels = heightInMm * mmToPixels;

                const img = new Image();
                img.onload = function() {
                    console.log(this.width);
                    console.log(this.height);
                    if (this.width !== widthInMm || this.height !== heightInMm) {
                        alert('Image dimensions must be 85mm x 109mm.');
                        document.getElementById('photo').value = '';
                    }
                };
                img.src = URL.createObjectURL(file);
            }
        });
    </script>
@endpush