@csrf
<div class="row align-items-center">
    <div class="col-lg-3 order-lg-1 order-2"></div>
    <div class="col-lg-6 mt-n3 order-lg-2 order-1">
        <div class="mb-5 mt-3">
            <div class="d-flex align-items-center justify-content-center mb-2">
                <div class="linear-gradient d-flex align-items-center justify-content-center rounded-circle" style="width: 110px; height: 110px;";>
                    <div class="border border-4 border-white d-flex align-items-center justify-content-center rounded-circle overflow-hidden" style="width: 100px; height: 100px;";>
                        <label for="change-image">
                            <img src="{{ isset($outlet) ? $outlet->profile_image ? asset('uploads/images/users/' . $outlet->profile_image) : asset('users-area-template/images/profile/user-1.jpg') : asset('users-area-template/images/profile/user-1.jpg') }}" onerror="this.src='{{ asset('users-area-template/images/profile/user-1.jpg') }}'" alt="" class="w-100 h-100 img-profile">
                        </label>
                    </div>
                    <input type="file" name="image" class="d-none" id="change-image" accept="image/*">
                </div>
            </div>
            <div class="text-center img-profile-error-container">
                @error('image')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>
        </div>
    </div>
    <div class="col-lg-3 order-last"></div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" placeholder="Name" name="outlet_code" value="{{ old('outlet_code', isset($outlet) ? $outlet->outlet_code : null) }}" required autocomplete="off">
            <label><i class="ti ti-pencil-minus me-2 fs-4"></i>Outlet Code</label>
            @error('outlet_code')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-floating mb-3">
            <select id="" class="form-select" name="outlet_type" required>
                <option value="">Select Type</option>
                <option value="POCO" @selected(old('outlet_type', isset($outlet) ? $outlet->outlet_type : null) == 'POCO')>POCO</option>
                <option value="POPO" @selected(old('outlet_type', isset($outlet) ? $outlet->outlet_type : null) == 'POPO')>POPO</option>
            </select>
            <label><i class="ti ti-pencil-minus me-2 fs-4"></i>Outlet Type</label>
            @error('outlet_type')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>
    </div>
</div>
<div class="form-floating mb-3">
    <input type="text" class="form-control" placeholder="Name" name="outlet_name" value="{{ old('outlet_name', isset($outlet) ? $outlet->outlet_name : null) }}" style="text-transform:uppercase" required autocomplete="off">
    <label><i class="ti ti-pencil-minus me-2 fs-4"></i>Outlet Name</label>
    @error('outlet_name')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>
<div class="form-floating mb-3">
    <input type="text" class="form-control" placeholder="Name" name="outlet_manager_name" value="{{ old('outlet_manager_name', isset($outlet) ? $outlet->outlet_manager_name : null) }}" style="text-transform:uppercase" required autocomplete="off">
    <label><i class="ti ti-pencil-minus me-2 fs-4"></i>Outlet Manager Name</label>
    @error('outlet_manager_name')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>
<div class="form-floating mb-3">
    <input type="text" class="form-control" placeholder="Account Number" name="outlet_account_number" value="{{ old('outlet_account_number', isset($outlet) ? $outlet->outlet_account_number : null) }}" style="text-transform:uppercase" required autocomplete="off">
    <label><i class="ti ti-pencil-minus me-2 fs-4"></i>Account Number</label>
    @error('outlet_account_number')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>
<div class="form-floating mb-3">
    <input type="text" class="form-control" placeholder="Account Name" name="outlet_account_name" value="{{ old('outlet_account_name', isset($outlet) ? $outlet->outlet_account_name : null) }}" style="text-transform:uppercase" required autocomplete="off">
    <label><i class="ti ti-pencil-minus me-2 fs-4"></i>Account Name</label>
    @error('outlet_account_name')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>
<div class="form-floating mb-3">
    <input type="text" class="form-control" placeholder="Whatsapp" name="whatsapp" value="{{ old('whatsapp', isset($outlet) ? $outlet->whatsapp : null) }}" >
    <label><i class="ti ti-brand-whatsapp me-2 fs-4"></i>Whatsapp</label>
    @error('whatsapp')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>
<div class="form-floating mb-3">
    <input type="text" class="form-control" placeholder="Instagram" name="instagram" value="{{ old('instagram', isset($outlet) ? $outlet->instagram : null) }}" >
    <label><i class="ti ti-brand-instagram me-2 fs-4"></i>Instagram</label>
    @error('instagram')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>
<div class="form-floating mb-3">
    <input type="text" class="form-control" placeholder="Tiktok" name="tiktok" value="{{ old('tiktok', isset($outlet) ? $outlet->tiktok : null) }}" >
    <label><i class="ti ti-brand-tiktok me-2 fs-4"></i>Tiktok</label>
    @error('tiktok')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>
<div class="form-floating mb-3">
    <input type="text" class="form-control" placeholder="Youtube" name="youtube" value="{{ old('youtube', isset($outlet) ? $outlet->youtube : null) }}" >
    <label><i class="ti ti-brand-youtube me-2 fs-4"></i>Youtube</label>
    @error('youtube')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>
<div class="form-floating mb-3">
    <input type="text" class="form-control" placeholder="Facebook" name="facebook" value="{{ old('facebook', isset($outlet) ? $outlet->facebook : null) }}" >
    <label><i class="ti ti-brand-facebook me-2 fs-4"></i>Facebook</label>
    @error('facebook')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>
<div class="form-floating mb-3">
    <input type="text" class="form-control" placeholder="Website" name="website" value="{{ old('website', isset($outlet) ? $outlet->website : null) }}" >
    <label><i class="ti ti-world me-2 fs-4"></i>Website</label>
    @error('website')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>
<div class="form-floating mb-3">
    <input type="text" class="form-control" placeholder="Google Review" name="google_review" value="{{ old('google_review', isset($outlet) ? $outlet->google_review : null) }}" >
    <label><i class="ti ti-brand-google me-2 fs-4"></i>Google Review</label>
    @error('google_review')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>
<div class="form-floating mb-3">
    <input type="email" class="form-control" placeholder="Email" name="email" value="{{ old('email', isset($outlet) ? $outlet?->user?->email : null) }}" required>
    <label><i class="ti ti-mail me-2 fs-4"></i>Email</label>
    @error('email')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>
<div class="form-floating mb-3">
    <input type="password" class="form-control" placeholder="Password" name="password" {{ !isset($outlet) ? 'required' : '' }}>
    <label><i class="ti ti-lock me-2 fs-4"></i>Password</label>
    @error('password')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>
<div class="form-floating mb-3">
    <input type="password" class="form-control" placeholder="Confirm Password" name="password_confirmation" {{ !isset($outlet) ? 'required' : '' }}>
    <label><i class="ti ti-lock me-2 fs-4"></i>Confirm Password</label>
    @error('password_confirmation')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>

@push('script')
    <script>
        $(function(){
            $('#change-image').on('change', function() {
                readURL(this);
            });

            $('form').on('submit', function(){
                const t = $(this)
                t.find('.btn').prop('disabled', true)
                t.find('.btn-save i').remove()
                t.find('.btn-save').prepend(`<div class="spinner-border spinner-border-sm" role="status"></div>`)
            })

            function readURL(input) {
                var url = input.value;
                var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
                if (input.files && input.files[0] && (ext == "png" || ext == "jpeg" || ext == "jpg" || ext == "webp" || ext == "gif")) {
                    var reader = new FileReader();
            
                    reader.onload = function(e) {
                        $('.img-profile').attr('src', e.target.result)
                    }
            
                    reader.readAsDataURL(input.files[0]);
                } else if (!url) {
                    $('.img-profile').attr('src', '{{ asset('users-area-template/images/profile/user-1.jpg') }}')
                } else {
                    $('.img-profile-error-container').html('<small class="text-danger">Invalid image format</small>')
                    $('.img-profile').attr('src', '{{ asset('users-area-template/images/profile/user-1.jpg') }}')
                }
            }
        })
    </script>
@endpush